Javascript淡入不会明显地产生动画效果

Javascript fade in doesn't visibly animate

本文关键字：动画 淡入 Javascript      更新时间：2023-09-26

所以我创建了以下函数来淡入元素并传入一个我想要淡入的div，在本例中是一个图片库弹出窗口，当用户单击我网站上的图像缩略图时，我想显示该弹出窗口。我还传入了一个速度值 （iSpeed），超时使用该值作为它的时间值。在这种情况下，我使用的是25（25ms）。

我已经逐步完成了这个函数，同时这样做它似乎按预期运行。如果当前不透明度小于 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，结果相同。

谢谢安 迪

这一行：

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

你的代码有很多问题。元素立即出现的一个罪魁祸首是，你调用 setTimeout 不是使用函数，而是使用函数的结果，因为 Effects.FadeIn 将立即执行。

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

可能会按照您的意图行事。

但说真的，你可能不应该重新发明这个轮子。 jQuery将允许您轻松地淡入和淡出元素，CSS过渡允许您通过添加或删除CSS类来实现元素淡入淡出。

T.J.和MoMolog对这个错误的看法都是正确的：你在将结果传递给setTimeout之前立即调用Effects.FadeIn函数——这意味着Effects.FadeIn一次又一次地同步调用自身，直到达到条件oElement.style.opacity >= 1。

你可能知道也可能不知道，许多在事件循环的一个回合内发生的 UI 更新将在下一次重绘（或类似的东西）时一起批处理，因此你不会看到任何类型的过渡。

这个jsFiddle包括建议的JS解决方案，以及我认为您可能会发现更好的替代方法：简单地添加一个带有过渡属性的CSS类。这将导致更流畅的动画。请注意，如果您采用此路线，则可能还需要包含一些供应商前缀。

相关文章：