如何將函數調用分組在jQuery中連續執行？

Question

我有一些jQuery動畫效果應用於頁面上的某些元素。現在我的代碼如下所示：

jQuery("#bgd_balance").animate({backgroundPositionY: "0px",},800,"swing"); 
jQuery(".balance_left_box").delay(2000).slideDown(200,"easeInCirc"); 
jQuery(".balance_left_box p.first-line").delay(2400).slideDown(600,"easeInCirc"); 
jQuery(".balance_left_box").delay(1000).animate({height:"270px",top:"64px",100,"easeInCirc"); 

我現在面臨的問題是，當我在調整某一元素的延遲，我不得不經歷的一切，並相應調整所有其它的延遲。

是否有可能有這樣的事情，而不是（僞）：

queue.add(
     delay(2000), 
     jQuery(".balance_left_box").slideDown(200,"easeInCirc"), 
     delay(2000), 
     jQuery(".balance_left_box p.first-line").slideDown(600,"easeInCirc"); 
     delay(1000),       
     jQuery(".balance_left_box").animate({height:"270px", top:"64px"},100,"easeInCirc"); 
).run(); 

我希望的代碼是不言而喻的。

我知道我可以通過在animate()調用中添加回調函數來實現此「排隊」，但隨後生成的代碼會非常龐大​​且難以讀取IMO。

Answer 1

，你可能覺得我對Can somebody explain jQuery.queue to me答案看起來很好，但這裏是如何使用隊列空物體上做一個非常簡單的隊列一個簡單的例子：

var tempQueue = jQuery({}); 

tempQueue.delay(2000); 
tempQueue.queue(function(next) { 
    // note using the callback on the animation to call the "next" function in the queue 
    jQuery(".balance_left_box").slideDown(200, "easeInCirc", next); 
}); 

tempQueue.delay(2000); 
tempQueue.queue(function(next) { 
    jQuery(".balance_left_box p.first-line").slideDown(600, "easeInCirc", next); 
}); 
tempQueue.delay(1000); 
tempQueue.queue(function(next) { 
    jQuery(".balance_left_box").animate({ 
     height: "270px", 
     top: "64px" 
    }, 100, "easeInCirc", next); 
});