检测 JS 淡入淡出何时完成，并运行更多代码

Question

我有以下设置，用于简单的自动幻灯片。

<div id="slideshow1" class="slideshow_container"/>
<!-- Image 1, this one is behind the div below -->
   <div id="slideshow2" class="slideshow_topimage"/>
      <!-- Image 2, the one on top which will do all of the fading -->
   </div>
</div>

所以，首先"slideshow2"会淡化为不透明，一旦褪色，它的背景图像就会交换。然后它将淡入视野，"slideshow1"将切换到下一个图像。

下面是我所有的 JavaScript，我如何让"fadeEffect"函数在完成淡入淡出后继续运行代码以交换图像？

//Fetch images for slideshow
function slideshowPrep(container) {
    var http = getHTTPObject();
    http.onreadystatechange = function() 
    {                   
        if (http.readyState == 4 && http.status == 200)
        {
            //Split images
            var imgs = http.responseText.split(",");
            imgs = cleanArray(imgs);
            preload(imgs);
            slideshowGo(imgs);
        }
    }
    http.open("GET", ROOT_DIR+"/php/returnImages.php");
    http.send();
}
//Manage the image swapping and execute the fading
function slideshowGo(imgs,next) {
    var next = 0;
    var con1 = doc("slideshow2").style.backgroundImage; //"url('')";
    fadeEffect.init('slideshow2',0);
}
var fadeEffect = function() {
    return{
        init:function(id, flag, target) {
            this.elem = doc(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
        },
        tween:function() {
            if(this.alpha == this.target) {
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value; 
            }
        }
    }
}();

编辑：好的，添加了我认为是回调的内容，但警报没有执行...？

//Manage the image swapping and execute the fading
function slideshowGo(imgs,next) {
    var next = 0;
    var con1 = doc("slideshow2").style.backgroundImage; //"url('')";
    fadeEffect.init('slideshow2',0,0,function(x) {
        alert(x);
    });
}
var fadeEffect = function() {
    return{
        init:function(id, flag, target, callback) {
            this.elem = doc(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
        },
        tween:function() {
            if(this.alpha == this.target) {
                clearInterval(this.elem.si);
                this.callback("callback?");
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value; 
            }
        }
    }
}();

编辑：

仍然不起作用，像您说的那样将回调更改为：

this.callback = "callback";

slideshowGo 函数中的警报根本不会触发：

fadeEffect.init('slideshow2',0,0,function(x) {
        alert(x);
    });

Answer 1

这不是淡入淡出效果结束的地方吗？

        if(this.alpha == this.target) {
            clearInterval(this.elem.si);
            // fire callback or increment loop counter or doNext()
            if (typeof cb === "function"){
                 // you can also pass any args that 
                 // may be useful to a callback here
                 cb();
            }
        }

简化的 jsfiddle

Answer 2

如果你想使用 jquery 淡出，淡出只需以下

：

    $('#slideshow2').fadeOut( "slow", function() {
        // Animation complete. perform the next action...
    });

http://api.jquery.com/fadeout/