title: jquery animate elements in different order
body: <p>I have code that animates opacity from 0 to 1 to multiple elements on the page. (7 in total) I need to start each elements animation in a specific order, as follows:
  element#3,element#4,element#1, element#6, element#7, element #2, element#5. </p>
  
  <p>(Each element contains 3 sub-elements, that is why in the code i have 22 total elements.  As soon as the first element animation completes, the second animation should starts.</p>
  
  <p>The problem is the timing is off:</p>
  
  <pre><code>setTimeout(function(){
  var delay = 200;
  $('.block-item:lt(22)').each(function(){
      $(this).delay(delay)
      .css({ opacity: 0.0 })
      .animate({
          opacity : 1.0
     },600);
     delay += 300;
  });
  }, 2000);
  </code></pre>