title: how to execute a series of animations one after another using jquery?
body: <p>This will animate the second image after the first animation is complete: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function () {
  
              $('#image1').show("slide", { direction: 'left' }, 1000,
               function() { $('#image2').show("slide", { direction: 'left' }, 1000)});
  
      &lt;/script&gt;
  </code></pre>
  
  <p>If I have four images I tried below - and only the first two images animate.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function () {
  
              $('#image1').show("slide", { direction: 'left' }, 1000,
               function() { $('#image2').show("slide", { direction: 'left' }, 1000)},
               function () { $('#image3').show("slide", { direction: 'left' }, 1000)},
               function () { $('#image4').show("slide", { direction: 'left' }, 1000)});
  
      &lt;/script&gt;
  </code></pre>
  
  <p>So what would be an effective way to animate all the images (4) in sequence?</p>