How does slideUp () work in jQuery? I am trying to make my own slideRIght ()

Question

I looked at the source code in jquery for slides ...

// Generate shortcuts for custom animations jQuery.each({ slideDown: genFx("show", 1), slideUp: genFx("hide", 1), slideToggle: genFx("toggle", 1), fadeIn: { opacity: "show" }, fadeOut: { opacity: "hide" }, fadeToggle: { opacity: "toggle" } }, function( name, props ) { jQuery.fn[ name ] = function( speed, easing, callback ) { return this.animate( props, speed, easing, callback ); }; }); 

I understand that this is a shorthand for functions, so I will go to GenFX

 function genFx( type, num ) { var obj = {}; jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice(0,num)), function() { obj[ this ] = type; }); return obj; } 

and then fxAttrs

 fxAttrs = [ // height animations [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ], // width animations [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ], // opacity animations [ "opacity" ] ], 

but I just can’t understand how this code works, or how I would like to create a slide sheet or slide effect that affects the HTML width attribute.

Answer 1

You can use:

 $('div').animate({ width: 'show' }); // slideLeft $('div').animate({ width: 'hide' }); // slideRight 

Demo on jsFiddle .

Answer 2

You can do the same with slideRight as with slideUp :

 $.fn.slideRight = function(options) { var s_opt = { speed: "slow", callback: null } $.extend(s_opt, options); return this.each(function() { $(this).effect("slide", null, s_opt.speed, s_opt.callback); }); }; 

Fiddle: http://jsfiddle.net/maniator/eVUsH/