jQuery - ricrea l'effetto slideDown() usando la funzione animate()?

Question

Come posso ricreare l'effetto $ .slideDown di jQuery utilizzando la funzione $ .animate?

Answer 1

Animare "altezza", "marginTop", "marginBottom", "paddingTop" e "paddingBottom" su "show".

Ad esempio:

$(...).animate({ 
    "height": "show", 
    "marginTop": "show", 
    "marginBottom": "show", 
    "paddingTop": "show", 
    "paddingBottom": "show" 
}); 

Fonte: jQuery codice sorgente.

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

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

function genFx(type, num) { 
    var obj = {}; 

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

    return obj; 
}