Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have looked at the source code in jquery for slideup...

// 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 shorthand for functions, so I folllow through 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 figure out how this code works, or how I would go about creating a slideLeft or slideRight that affects the width attribute of the HTML.

like image 786
digiguru Avatar asked May 27 '11 15:05

digiguru


People also ask

How does jQuery slideUp work?

jQuery slideUp() Method The slideUp() method slides-up (hides) the selected elements. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To slide-down (show) elements, look at the slideDown() method.

How do you toggle slideUp and slideDown in jQuery?

The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.

How do you create a left and right toggle effect in jQuery slide?

The task here is to create a slide left and right toggle effect in the JQuery, you can use the jQuery animate() method. . animate() method: It is used to change the CSS property to create the animated effect for the selected element.

Which jQuery method is used to slide up an element?

The jQuery slideUp() method is used to slide up an element. Syntax: $(selector).slideUp(speed,callback);


2 Answers

You can use:

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

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

Demo at jsFiddle.

like image 79
MacMac Avatar answered Nov 02 '22 09:11

MacMac


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/

like image 44
Naftali Avatar answered Nov 02 '22 08:11

Naftali