how to group function calls for consecutive execution in jQuery?
<p>I have a number of jQuery animation effects applied to certain elements on the page. Right now my code looks like this:</p>

<pre><code>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");
</code></pre>

<p><strong>the problem I'm facing</strong> is that when I'm tweaking delay of a certain element, i have to go through everything and adjust all other delays accordingly. </p>

<p>Is it possible to have something like this instead (<strong>pseudocode</strong>):</p>

<pre><code>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();
</code></pre>

<p>I hope the code speaks for itself. </p>

<p>I know I can achieve this "queuing" by adding callback function to <code>animate()</code> call but then resulting code will be really bulky and hard to read IMO.</p>
