title: jQuery .delay() in animation loops
body: <p>I'm trying to do some basic animation with jQuery. I want to fade in a few elements, but I would like to fade in, the 2nd element while the 1st one is halfway done, the 3rd while the 2nd it halfway done, etc.</p>
  
  <p>I know I can do something like this:</p>
  
  <pre><code>$('#element1).fadeIn(1000);
  $('#element2).delay(500).fadeIn(1000);
  $('#element3).delay(500).fadeIn(1000);
  etc.
  </code></pre>
  
  <p>A loop seems more elegant though and my question is, why doesn't the following code work as I would expect?</p>
  
  <pre><code>for (var i = 1; i &lt;= 5; i++;) {
      $('#box' + i).fadeIn(2000).delay(500);
  }
  </code></pre>
  
  <p>I would expect a delay to occur between each loop iteration, but instead all animation happens in sync.</p>
  
  <p>Where am I seeing this wrong?</p>