檢測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/