Javascript 淡入没有明显的动画效果

Question

因此，我创建了以下函数来淡入淡出元素，并传入一个我想要淡入淡出的 div，在本例中，我希望在用户单击我网站上的图像缩略图时显示一个图像库弹出窗口。我还传递了一个速度值(iSpeed)，超时将其用作时间值。在本例中，我使用 25(25 毫秒)。

我已经逐步完成了这个功能，同时它似乎按预期运行。如果当前的不透明度小于1，则增加，并在超时后重新调用自身，直到不透明度达到1。当达到1时，它停止褪色并返回。

因此，在逐步完成它之后，我取消了断点并尝试查看它的实际效果，但由于某种原因，我的画廊立即出现，没有任何褪色的感觉。

var Effects = new function () {

    this.Fading = false;

    this.FadeIn = function (oElement, iSpeed) {

        //set opacity to zero if we haven't started fading yet.
        if (this.Fading == false) {
            oElement.style.opacity = 0;
        }

        //if we've reached or passed max opacity, stop fading
        if (oElement.style.opacity >= 1) {
            oElement.style.opacity = 1;
            this.Fading = false;
            return;
        }
        //otherwise, fade
        else {
            this.Fading = true;
            var iCurrentOpacity = parseFloat(oElement.style.opacity);
            oElement.style.opacity = iCurrentOpacity + 0.1;
            setTimeout(Effects.FadeIn(oElement, iSpeed), iSpeed);
        }

    }

}

这是我设置画廊的地方。

this.Show = function (sPage, iImagesToDisplay, oSelectedImage) {

        //create and show overlay
        var oOverlay = document.createElement('div');
        oOverlay.id = 'divOverlay';
        document.body.appendChild(oOverlay);

        //create and show gallery box
        var oGallery = document.createElement('div');
        oGallery.id = 'divGallery';
        oGallery.style.opacity = 0;
        document.body.appendChild(oGallery);

        //set position of gallery box
        oGallery.style.top = (window.innerHeight / 2) - (oGallery.clientHeight / 2) + 'px';
        oGallery.style.left = (window.innerWidth / 2) - (oGallery.clientWidth / 2) + 'px';

        //call content function
        ImageGallery.CreateContent(oGallery, sPage, iImagesToDisplay, oSelectedImage);

        //fade in gallery
        Effects.FadeIn(oGallery, 25);

    }

有人可以帮我吗？

此外，我正在使用 IE10，并且也尝试过 Chrome，结果相同。

谢谢，安迪

Answer 1

这一行:

setTimeout(Effects.FadeIn(oElement, iSpeed), iSpeed);

使用给定参数调用 Effects.FadeIn，并将其返回值输入到 setTimeout 中。这与 foo(bar()) 完全相同，它立即调用 bar，然后将其返回值提供给 foo.

由于您的 FadeIn 函数不返回函数，这就是问题所在。

也许你的意思是:

setTimeout(function() {
    Effects.FadeIn(oElement, iSpeed);
}, iSpeed);

...尽管您最好创建一次该函数并重用它。

例如，我认为这可以满足您的需求，但无需在每个循环上重新创建函数:

var Effects = new function () {

    this.FadeIn = function (oElement, iSpeed) {
        var fading = false;

        var timer = setInterval(function() {
            //set opacity to zero if we haven't started fading yet.
            if (fading == false) { // Consider `if (!this.Fading)`
                oElement.style.opacity = 0;
            }

            //if we've reached or passed max opacity, stop fading
            if (oElement.style.opacity >= 1) {
                oElement.style.opacity = 1;
                clearInterval(timer);
            }
            //otherwise, fade
            else {
                fading = true;
                var iCurrentOpacity = parseFloat(oElement.style.opacity);
                oElement.style.opacity = iCurrentOpacity + 0.1;
            }
        }, iSpeed);
    };
};