title: jQuery animate each element with delay, with delay at start
body: <p>I have a series of divs which I'm animating.  The following jquery works well in doing this:</p>
  
  <pre><code>function animatePanels() {
      $panels = $('.panel');
      $panels.each(function (i) {
          $(this).delay(5000 * i).animate({ left: '-300' }, 200);
      });
  }
  
  animatePanels();
  </code></pre>
  
  <p>However, I'd like to delay the first iteration of the animation, so that the page loads, it waits 5000ms then the first animation happens, then 5000ms delay then the next etc.  Currently the first animation fires immediately.  I'm not entirely sure why this is, as I thought the delay would be called <em>before</em> the animation?</p>
  
  <p>I've tried this:</p>
  
  <pre><code>setTimeout(animatePanels(), 5000);
  </code></pre>
  
  <p>But it doesn't have any affect.</p>
  
  <p>Can anyone set me straight on this?</p>
  
  <p>Thanks folks!</p>