1

有没有可以看到实际代码以及 JQuery 方法是如何构造的地方？例如，fadeIn() 和 slideUp() 方法是如何编码的？我想要它用于学习/学习目的，我尝试查看 JQuery.js 文件，它很难阅读。然后我试着去这里阅读：

http://code.jquery.com/jquery-2.0.3.js

但后来我找不到 slideUp 和 fadeIn 方法的实际代码。

4

2 回答 2

4

我相信就是这样（它在链接的文件中；将其作为评论发布，但它太难破译了）：

// Generate shortcuts for custom animations
jQuery.each({
    slideDown: genFx("show"),
    slideUp: genFx("hide"),
    slideToggle: genFx("toggle"),
    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 );
    };
});

genFx 指的是这个方法（用于上滑\下）：

// Generate parameters to create a standard animation
function genFx( type, includeWidth ) {
    var which,
        attrs = { height: type },
        i = 0;

    // if we include width, step value is 1 to do all cssExpand values,
    // if we don't include width, step value is 2 to skip over Left and Right
    includeWidth = includeWidth? 1 : 0;
    for( ; i < 4 ; i += 2 - includeWidth ) {
        which = cssExpand[ i ];
        attrs[ "margin" + which ] = attrs[ "padding" + which ] = type;
    }

    if ( includeWidth ) {
        attrs.opacity = attrs.width = type;
    }

    return attrs;
}

我猜它会调用其他涵盖常见功能的方法。这是我发现的唯一声明。

于 2013-10-10T04:29:49.380 回答
3

如果您查看代码，您会看到 slideUp 和 fadeIn 方法是通过以下方式动态创建的：

jQuery.each({
    slideDown: genFx("show"),
    slideUp: genFx("hide"),
    slideToggle: genFx("toggle"),
    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 );
    };
});

如前所述，这些只是使用 jquery animate函数的快捷方法。对于上面 jQuery.each 方法中的每个属性，其值作为 props 参数传递，该参数传递给 this.animate 的 props 字段。genFx 返回一个具有属性的对象，因此其工作方式相同。您可能想要检查 @Kyle 所描述的 animate 函数和 genFx 函数，以更好地了解这些函数中发生了什么。

于 2013-10-10T04:31:58.797 回答