jQuery隊列事件

Question

所以我想要做的是協調一些使用jQuery的一些效果與我正在使用的一些AJAX調用。我的問題是，第二個div的淡入與第一個div的淡出同時發生。

這可能也適用於其他事件，所以我很好奇，有沒有什麼辦法可以在fadeOut完成後進行fadeId啓動？

jQuery("#div1").fadeOut("slow"); 
jQuery("#div2").fadeIn("slow"); 

感謝

Answer 1

您可以用回調做到這一點。查看jQuery docs。

jQuery("#div1").fadeOut("slow", function() { jQuery(this).fadeIn('slow'); }); 

幾乎所有的jQuery效果都需要在效果結束後執行回調。

Answer 2

這通常是足夠好的一個快速的動畫，但如果你要排隊了一些效果，你也可以利用隊列（）和出隊（）方法是這樣的：

$("#div1").fadeOut(); 
$("#div1").queue(function() 
{ 
    $(this).fadeIn(); 
    $(this).dequeue(); 
}); 
$("#div").queue(function() 
{ 
    $(this).html("And now I'm sliding up. Wee!"); 
    $(this).slideUp("slow"); 
    $(this).dequeue(); 
}); 

這裏，隊列（）將函數添加到對象的隊列（不一定是動畫）並且dequeue（）執行該函數。

查看docs瞭解更多信息。

Answer 3

有在這使它不能在Firefox工作，修正版本上面的例子中的一些錯字：

$("#div1").fadeOut(); 
$("#div1").queue(function() 
{ 
    $(this).fadeIn(); 
    $(this).dequeue(); 
}); 
$("#div").queue(function() 
{ 
    $(this).html("And now I'm sliding up. Wee!"); 
    $(this).slideUp("slow"); 
    $(this).dequeue(); 
});