Jquery fadeOut隊列

Question

我有兩個div。一個有黑色背景和一個紫色。我使用jquery淡出黑色的div，也淡入淡紫色。但是，似乎兩者都試圖同時發生。

我的問題是如何使紫色div淡入後，只有在紫色div完全淡出後。我聽說過隊列方法，但我不清楚如何使用它。

$("div.black").fadeOut(); 
$("div.purple").fadeIn().queue(); // <-- purple div still trys to fade in 
// while black div is fading out. 
// I need the purple div to wait 
// until that black div has completely faded out. 

Answer 1

像這樣

$("div.black").fadeOut(function(){ 
    $("div.purple").fadeIn(); 
}); 

Answer 2

嘗試這種使用回調

$("div.black").fadeOut(400,function(){ 
    $("div.purple").fadeIn().queue(); 
}); 

Answer 3

您可以考慮使用setTimeout的，這需要一個功能和時間以毫秒爲單位等待。我認爲這樣的事情應該可以工作：

$("div.black").fadeOut(500); 
setTimeout(function() { 
    $("div.purple").fadeIn() 
}, 600) 

Answer 4

fadeIn/fadeOut將回調函數作爲其參數之一。這個功能就被執行的動畫完成：

$(".black").fadeOut(function() { 
    // this will run once the fadeOut animation is complete 
    $(".purple").fadeIn(); 
}); 

小提琴：http://jsfiddle.net/fAbBn/