如何讓jQuery效果按順序運行，而不是同時運行？

Question

如何在jQuery中按順序運行兩個效果，而不是同時運行？就拿這一段代碼，例如：

$("#show-projects").click(function() { 
    $(".page:visible").fadeOut("normal"); 
    $("#projects").fadeIn("normal"); 
}); 

的淡出和淡入同時運行，我該如何讓他們運行一個接一個？

Answer 1

你可以提供一個回調運行效果完成後的效果功能。

$("#show-projects").click(function() { 
    $(".page:visible").fadeOut("normal", function() { 
     $("#projects").fadeIn("normal"); 
    }); 
}); 

Answer 2

你想要的是一個隊列。

退房http://api.jquery.com/queue/的參考頁一些工作實例。

Answer 3

是否必須有目標？當然你可以使用隨機目標來順序排列事件，只要目標是恆定的...下面我使用動畫目標的父節點來存儲隊列。

//example of adding sequential effects through 
//event handlers and a jquery event trigger 
jQuery(document).unbind("bk_prompt_collapse.slide_up"); 
jQuery(document).bind("bk_prompt_collapse.slide_up" , function(e, j_obj) { 
    jQuery(j_obj).queue(function() { 
     //running our timed effect 
     jQuery(this).find('div').slideUp(400); 
     //adding a fill delay to the parent 
     jQuery(this).delay(400).dequeue(); 
    }); 
});      
//the last action removes the content from the dom 
//if its in the queue then it will fire sequentially 
jQuery(document).unbind("bk_prompt_collapse.last_action"); 
jQuery(document).bind("bk_prompt_collapse.last_action" , function(e, j_obj) { 
    jQuery(j_obj).queue(function() { 
     //Hot dog!! 
     jQuery(this).remove().dequeue(); 
    }); 
}); 
jQuery("tr.bk_removing_cart_row").trigger( 
    "bk_prompt_collapse" , 
    jQuery("tr.bk_removing_cart_row") 
); 

不知道其可能的，但好像你可以綁定.dequeue（）火時是另一個jQuery事件觸發的，而不是在我上面的例子射擊在線？有效地停止動畫隊列？

Answer 4

$("#foo").fadeOut(300).delay(800).fadeIn(400);