jQuery - воссоздать эффект slideDown() с помощью функции animate()?

Как воссоздать эффект jQuery $.slideDown с помощью функции $.animate?


person Alex    schedule 09.07.2010    source источник
comment
почему бы просто не использовать slideDown()?   -  person Patricia    schedule 10.07.2010
comment
потому что у animate() есть опция шага, к которой я могу присоединить функцию.   -  person Alex    schedule 10.07.2010


Ответы (1)


Анимируйте «height», «marginTop», «marginBottom», «paddingTop» и «paddingBottom» до "show".

Например:

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

Источник: исходный код 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;
}
person SLaks    schedule 09.07.2010
comment
Предполагая, что это будет скрытие вместо показа для .slideUp()? - person Brian Leishman; 20.03.2015