title: Iterating over child elements one at a time
body: <p>as the title states, I am trying to iterate over a collection of child elements, the trouble comes in when I try to fade them out one at a time, I am using <code>$.each()</code> to try and achieve this, but it seems to be fading everything out at once, what I would like it to do is wait for the animation to finish and then go to the next child element and fade that out, here is my code,</p>
  
  <p>jQuery: </p>
  
  <pre><code>var children = $("container").children();
  
  children.each(function(){
      $(this).fadeOut('slow');
  })
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div style="background: #F00;"&gt;&lt;/div&gt;
      &lt;div style="background: #00F;"&gt;&lt;/div&gt;
      &lt;div style="background: #0F0;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>also, would it be possible to trigger an animation before the current one has finished, but delaying it by a set interval?</p>
  
  <p>Thanks in advance!</p>