jQuery - tạo lại hiệu ứng slideDown() bằng cách sử dụng hàm animate()?

Question

Làm cách nào tôi có thể tạo lại hiệu ứng $ .slideDown của jQuery bằng hàm $ .animate?

Answer 1

Tạo hiệu ứng "chiều cao", "marginTop", "marginBottom", "paddingTop" và "paddingBottom" thành "show".

Ví dụ:

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

Nguồn: mã nguồn jQuery.

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; 
}