Question

我在下面有这个测试过的功能，可以很好地淡化或淡出元素。

使用JQuery可以获得什么？

由于

Effects.prototype.fade = function( direction, max_time,  element ) 
{
    var elapsed = 0;
    function next() {
        elapsed += 10;
        if (direction === 'up')
        {
            element.style.opacity = elapsed / max_time;
        }
        else if (direction === 'down')
        {
            element.style.opacity = (max_time - elapsed) / max_time;
        }
        if (elapsed <= max_time) {
            setTimeout(next, 10);
        }
    }
    next();
};

在核心jquery库上的fadeIn（）上运行搜索我在这里得到一个：

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

function (prop, speed, easing, callback) {
    var optall = jQuery.speed(speed, easing, callback);
    if (jQuery.isEmptyObject(prop)) {
        return this.each(optall.complete, [false]);
    }
    prop = jQuery.extend({},
    prop);
    return this[optall.queue === false ? "each" : "queue"](function () {
        if (optall.queue === false) {
            jQuery._mark(this);
        }
        var opt = jQuery.extend({},
        optall),
            isElement = this.nodeType === 1,
            hidden = isElement && jQuery(this).is(":hidden"),
            name, val, p, display, e, parts, start, end, unit;
        opt.animatedProperties = {};
        for (p in prop) {
            name = jQuery.camelCase(p);
            if (p !== name) {
                prop[name] = prop[p];
                delete prop[p];
            }
            val = prop[name];
            if (jQuery.isArray(val)) {
                opt.animatedProperties[name] = val[1];
                val = prop[name] = val[0];
            } else {
                opt.animatedProperties[name] = opt.specialEasing && opt.specialEasing[name] || opt.easing || "swing";
            }
            if (val === "hide" && hidden || val === "show" && !hidden) {
                return opt.complete.call(this);
            }
            if (isElement && (name === "height" || name === "width")) {
                opt.overflow = [this.style.overflow, this.style.overflowX, this.style.overflowY];
                if (jQuery.css(this, "display") === "inline" && jQuery.css(this, "float") === "none") {
                    if (!jQuery.support.inlineBlockNeedsLayout) {
                        this.style.display = "inline-block";
                    } else {
                        display = defaultDisplay(this.nodeName);
                        if (display === "inline") {
                            this.style.display = "inline-block";
                        } else {
                            this.style.display = "inline";
                            this.style.zoom = 1;
                        }
                    }
                }
            }
        }
        if (opt.overflow != null) {
            this.style.overflow = "hidden";
        }
        for (p in prop) {
            e = new jQuery.fx(this, opt, p);
            val = prop[p];
            if (rfxtypes.test(val)) {
                e[val === "toggle" ? hidden ? "show" : "hide" : val]();
            } else {
                parts = rfxnum.exec(val);
                start = e.cur();
                if (parts) {
                    end = parseFloat(parts[2]);
                    unit = parts[3] || (jQuery.cssNumber[p] ? "" : "px");
                    if (unit !== "px") {
                        jQuery.style(this, p, (end || 1) + unit);
                        start = (end || 1) / e.cur() * start;
                        jQuery.style(this, p, start + unit);
                    }
                    if (parts[1]) {
                        end = (parts[1] === "-=" ? -1 : 1) * end + start;
                    }
                    e.custom(start, end, unit);
                } else {
                    e.custom(start, val, "");
                }
            }
        }
        return true;
    });
}

Answer 1

通常，您不会将jQuery这样的库仅用于单个效果，而是作为通用库来简化DOM manipulation，AJAX调用等内容，除了应用CSS（例如.fadeIn / .fadeOut）和effects other之外，还可以采用跨浏览器的方式设置applications属性

建议您不要只为简单的调用添加jQuery。但我的理由是，从长远来看，你可能会开发越来越多的功能，所以我没有看到不使用它的真正原因。

关于实现自己的fadeIn或fadeOut函数的主题，您可以查看jQuery source并提取这些方法，或者从头开始自己实现。但鉴于jQuery已经实现了这种方法，我不明白你为什么要复制它，除了用于教育目的。

Answer 2

在我看来，使用JQuery优于自定义代码的最大原因是您不必为多个浏览器和多个版本维护代码。 JQuery很好地为您处理主要浏览器的怪癖。

此外，您可能希望稍后使用JQuery的许多其他优秀用途。

关于代码，当您下载JQuery：http://docs.jquery.com/Downloading_jQuery时，您可以获得未压缩的版本，该版本旨在可读。

我不知道从JQuery中获取这些函数的简单方法。为什么不使用完整的库？

动画淡出| jQuery vs pure js | setInterval与setTimeout

2 个答案: