title: jQuery animation queues across multiple elements
body: <p>This question is similar to <a href="https://stackoverflow.com/questions/461912/jquery-finish-one-animation-then-start-the-other-one">this one about animation queues</a>, but the answers in that thread are very specific and not easily generalised.</p>
  
  <p>In my web application, messages are reported back to the user (info boxes, errors &amp; warnings, etc) by outputting a <code>div</code> with <code>class="alert"</code> eg:</p>
  
  <pre><code>&lt;div class="alert"&gt;Login successful&lt;/div&gt;
  &lt;div class="alert"&gt;You have new messages waiting&lt;/div&gt;
  </code></pre>
  
  <p>There could be any number of alerts on a page, depending on what the user does.</p>
  
  <p>What I'd like is to use a jQuery animation to show each of the alert boxes sequentially: once one animation ends, the next one begins.</p>
  
  <p>The answers in that other question said to use a callback like:</p>
  
  <pre><code>$('#Div1').slideDown('fast', function(){
      $('#Div2').slideDown('fast');
  });
  </code></pre>
  
  <p>except that won't work if there's an unknown number of divs to animate. Anyone know of a way to achieve this?</p>