Question

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

我已逐步完成此功能，同时这样做似乎正常运作。如果当前不透明度小于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);
    };
};

Answer 2

您的代码存在很多问题。对于元素立即出现的一个问题是你不使用函数调用setTimeout，而是调用函数的结果，因为Effects.FadeIn将立即执行。

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

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

但严重的是，你可能不应该重新发明这个轮子。 jQuery允许您轻松地淡入淡出元素，CSS transitions允许您使用添加或删除CSS类来实现元素淡化。

Answer 3

T.J.和MoMolog对于错误都是正确的：您在将结果传递给Effects.FadeIn之前立即调用setTimeout函数 - 这意味着{{1 }}一次又一次地同步调用自己，直到达到条件Effects.FadeIn。

正如您可能知道或不知道的那样，在事件循环的一个回合中发生的许多UI更新将在下一次重绘（或类似的东西）上一起批处理，因此您将看不到任何类型的转换。

This jsFiddle包括建议的JS解决方案，以及我认为您可能会发现更好的替代方法：只需添加一个带有the transition property的CSS类。这将导致更平滑的动画。但是，请注意，如果您使用此路线，则可能还需要包含一些供应商前缀。

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

3 个答案: