如何将函数调用分组在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); 
});