动画淡出 | jQuery vs 纯JS | setInterval vs. setTimeout

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源代码查看器。

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

- user656925

---

1. 你不必写它。
2. 你不需要写它。
3. 你不必...好吧 :) 考虑到“写它”也意味着“考虑浏览器的怪异行为”。这也很好地融入了jQuery效果模型进行链接等操作。

- user166390

@Guy Montag 函数是 animate()，它在回调中运行并处理大部分事情。如果您已经在使用 jQuery，那么没有必要重新发明轮子，可以使用它提供的函数。 - elclanrs

仅仅使用setInterval就足以对代码的合法性产生怀疑。http://blog.propcom.co.uk/technology/setinterval-vs-recursive-settimeout-pattern - Dagg Nabbit

@JQuery...你没有遵循自己的编码风格，如此报告在这里http://docs.jquery.com/JQuery_Core_Style_Guidelines - user656925

顺便说一句，如果您考虑使用项目中的代码，请对其进行评估和审查。 - Dagg Nabbit

Answer 1

通常情况下，你不会只为了实现一个简单的效果而引入像jQuery这样的库，而是将其作为一种通用的库来简化诸如DOM操作、AJAX调用、以跨浏览器的方式设置CSS属性，以及应用效果（如.fadeIn/.fadeOut）和其他 应用程序等事项。

通常情况下，建议你不要仅仅为了一个简单的调用而添加jQuery。但我的理解是，长期来看，你可能会越来越多地利用它的功能，所以我认为没有真正的理由不使用它。

关于实现自己的fadeIn或fadeOut函数，你可以查看jQuery源代码并提取这些方法，或者从头开始制作自己的实现。但考虑到jQuery已经实现了这个方法，除非出于教育目的，否则我不明白为什么你要复制它。

- bevacqua

---

你不能从jQuery中提取 - 看一下上面的源代码以及分支的方式有多少种...它不是模块化的。 - user656925

嗯，你可以从中得到一些想法。 - bevacqua

Answer 2

我认为，使用JQuery而不是自定义代码的最大原因是，您无需为多个浏览器和版本维护代码。JQuery很好地处理了主要浏览器的怪癖。

此外，还有许多其他优秀的JQuery用途，您可能以后会用到。

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

我不知道是否有简单的方法仅提取JQuery中的那些函数。为什么不使用完整的库呢？

- Danation