检测JS Fade何时完成，并运行更多代码

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> 

所以，首先“幻灯片2”将褪色到不透明，一旦褪色，它的背景图像将交换。 然后它会淡入视图，“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 = “回调”;

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

Simplified jsfiddle

Answer 2

如果你想使用一个jQuery淡出，这纯粹是为淡出如下：

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

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