title: How create a chained delayed animation sequence in jQuery?
body: <p>Consider having the following objects:</p>
  <pre><code>&lt;div id=&quot;d1&quot;&gt;&lt;span&gt;This is div1&lt;/span&gt;&lt;/div&gt;
  &lt;div id=&quot;d2&quot;&gt;&lt;span&gt;This is div2&lt;/span&gt;&lt;/div&gt;
  &lt;div id=&quot;d3&quot;&gt;&lt;span&gt;This is div3&lt;/span&gt;&lt;/div&gt;
  &lt;div id=&quot;d4&quot;&gt;&lt;span&gt;This is div4&lt;/span&gt;&lt;/div&gt;
  &lt;div id=&quot;clickhere&quot;&gt;&lt;span&gt;Start animation&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  <p>And consider that I would like to apply, using jQuery, an animation on each of the four element listed before.</p>
  <h2>What I have now</h2>
  <p>Consider the following code applied in the head section if the page:</p>
  <pre><code>function start_anim() {
    $(&quot;#d1&quot;).animate({top:&quot;-50px&quot;},1000,function(){}); // Animating div1
    $(&quot;#d2&quot;).animate({top:&quot;-50px&quot;},1000,function(){}); // Animating div2
    $(&quot;#d3&quot;).animate({top:&quot;-50px&quot;},1000,function(){}); // Animating div3
    $(&quot;#d4&quot;).animate({top:&quot;-50px&quot;},1000,function(){}); // Animating div4
  }
  $(document).ready($('#clickhere').click(start_anim));
  </code></pre>
  <p>This fragment of script will cause a synchronous translation of the four divs when the event <code>click</code> is fired.</p>
  <h2>What I would like to have</h2>
  <p>However I would like to have the first div move first, then I would like to have the second div move when the first div's animation has reached the 50%. The same for the third and the last div.</p>
  <p>How can I reach this? Thankyou</p>