Javascript fadeIn和fadeOut功能不工作

我正在使用纯javascript开发fadein和fadeout函数，下面是代码：

(function() {
    var fx = {
        easing: {
            linear: function(progress) {
                return progress;
            },
            quadratic: function(progress) {
                return Math.pow(progress, 2);
            },
            swing: function(progress) {
                return 0.5 - Math.cos(progress * Math.PI) / 2;
            },
            circ: function(progress) {
                return 1 - Math.sin(Math.acos(progress));
            },
            back: function(progress, x) {
                return Math.pow(progress, 2) * ((x + 1) * progress - x);
            },
            bounce: function(progress) {
                for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
                    if (progress >= (7 - 4 * a) / 11) {
                        return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
                    }
                }
            },
            elastic: function(progress, x) {
                return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * x / 3 * progress);
            }
        },
        animate: function(options) {
            var start = new Date;
            var id = setInterval(function() {
                var timePassed = new Date - start;
                var progress = timePassed / options.duration;
                if (progress > 1) {
                    progress = 1;
                }
                options.progress = progress;
                var delta = options.delta(progress);
                options.step(delta);
                if (progress == 1) {
                    clearInterval(id);
                    options.complete();
                }
            }, options.delay || 10);
        },
        fadeOut: function(element, options) {
            var to = 1;
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return fx.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to - delta;
                }
            });
        },
        fadeIn: function(element, options) {
            var to = 0;
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return fx.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to + delta;
                }
            });
        }
    };
    window.fx = fx;
})()

我正在使用以下代码激活该功能：

document.getElementById('in').addEventListener('click', function() {
    FX.fadeIn(document.getElementById('type'), {
        duration: 2000,
    });
}, false);

但是当我加载页面时，激活码出现了一个错误

有人知道我做错了什么吗

---

非常感谢。

经过一些调整，您的代码应该可以正常工作

如前所述，使用

fx

而不是

fx

调用对象

如果未提供选项，请为所有选项添加默认值（示例代码会抛出错误，因为

options.complete

未定义）。例如：

this.animate({
    duration: options.duration || 1000,
    ...
    complete: options.complete || function() { },
    ...
});

在设置动画之前调整样式（假设使用

display:none

而不是

opacity:0

隐藏元素）。。。示例（对于

fadeIn

）：

检查是否需要执行任何操作（例如，尽管元素已可见，但仍调用

fadeIn

）：

下面是更正后的代码和示例：

---

当然，我们可以进一步调整它，处理一些特殊情况（例如，当元素当前正在淡出时调用

fadeIn

），我很确定它不会在所有浏览器（旧浏览器）中都工作。。。但我希望我给你指明了正确的方向

您的全局fx对象被称为

fx

，但您正试图调用

fx

。这可能不会有什么帮助。有没有一个很好的理由来解释你为什么要基本上重新发明jQuery的一部分？@Nunners我喜欢自己做事情，我可以使用jQuery，但这样我有一个挑战。@Nunners我打赌jQuery不是第一个这样做的，而是从另一个重新发明的。有很多很好的理由（重新）实现这个功能：为了挑战，为了性能。。。谁在乎呢？@jackflash我并没有对此提出异议，我只是好奇他这么做的背后动机是什么，不使用具有这种功能且广泛使用的东西。我现在明白了他为什么要这么做，并接受了这一点：）

element.style.opacity = 0;
element.style.visibility = "visible";
element.style.display = "block";

isVisible: function(element) {
    return element.style.display !== "none" && 
            element.style.visibility !== "hidden" && 
            element.style.opacity !== "0";
}

// In fadeIn:
if (!this.isVisible(element)) {
    ...
}