代码之家  ›  专栏  ›  技术社区  ›  Alex

jQuery-使用animate()函数重新创建slideDown()效果?

  •  13
  • Alex  · 技术社区  · 14 年前

    如何使用$.animate函数重新创建jQuery的$.slideDown效果?

    1 回复  |  直到 8 年前
        1
  •  30
  •   Eng.Fouad    12 年前

    将“高度”、“边距顶部”、“边距底部”、“填充顶部”和“填充底部”设置为动画 "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;
    }
    
    推荐文章