Javascript 动画淡入淡出| jQuery vs纯js | setInterval vs.setTimeout

我在下面有一个经过测试的函数，它可以很好地将元素淡入淡出

使用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();
};

使用

---

通常，除了应用（如

.fadeIn

/

.fadeOut

）和其他功能外，还可以将库作为通用库，以跨浏览器的方式简化DOM、调用、设置属性等内容

建议不要只为一个简单的调用添加jQuery。但我的理由是，从长远来看，您可能会利用它越来越多的功能，因此我看不出不使用它的真正理由

---

关于实现您自己的fadeIn或fadeOut函数的主题，您可以查看并提取这些方法，或者从头开始创建您自己的实现。但是考虑到jQuery已经实现了这个方法，我不明白除了出于教育目的之外，您为什么要复制它。

我认为，在自定义代码上使用jQuery的最大原因是，您不必为多个浏览器和多个版本维护代码。JQuery在处理主要浏览器的怪癖方面做得很好

此外，JQuery还有许多其他出色的用途，您可能希望稍后使用

关于代码，当您下载JQuery:时，您可以得到未压缩的版本，这是为了可读

---

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

1。你不必写。2.你不必写。3.你不必。。。嗯：“写它”也意味着“浏览浏览器的怪癖”。它还可以很好地融入jQuery效果模型的其余部分，用于链接等。只需下载jQuery开发人员源代码并提取fadeIn函数。jQuery的fadeIn做了一些类似于您的函数的事情，但它在负载下的性能更好，尽量保持时间限制。另外，整个animate库设计得非常好，这些东西都能正常工作。根据我之前的观察，jQuery使用计时器（setTimeout）递归调用函数。这样，在转换过程中，您的UI就不会被锁定。@Joseph-这就是我要做的……在哪里可以找到JQuery实现？@Guy Montag函数是

animate（）

，它在回调中运行，负责大部分事情。如果您已经在使用jQuery，那么没有理由重新设计轮子，请使用它提供的功能。您无法从jQuery中提取-请查看上面的源代码以及它的分支方式……它不是模块化的。好吧，您可以从中获得想法。

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

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