Question

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

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

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

Answer 1

我相信这就是它（它在链接的文件中;会将其作为评论发布，但解密起来太难了）：

// 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指的是这种方法（对于slideup \ down）：

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

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

Answer 2

如果查看代码，您会看到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返回一个具有属性的Object，以便以相同的方式工作。您可能希望检查animate函数和genFx函数，如@Kyle所述，以便更好地了解这些函数中发生的情况。

我在哪里可以找到JQuery方法的实际代码？

2 个答案: