title: jquery animate: change the element's opacity one by one
body: <p>Any idea how to animate the opacity of each certain element one by one up to 16 targets/ elements only?</p>
  
  <p>This will change the opacity of the elements all together,</p>
  
  <pre><code>$('.block-item').animate({
          opacity:0
      },500);
  </code></pre>
  
  <p>Have a look <a href="http://jsfiddle.net/VS8tQ/" rel="noreferrer">here</a>.</p>
  
  <p>But I want the opacity to change one after another. and this will stop when it reaches the 16th element.</p>
  
  <p>Here is the html,</p>
  
  <pre><code>&lt;div id="parent_container"&gt;
  
  &lt;div class="block-item"&gt;1&lt;/div&gt;
  &lt;div class="block-item"&gt;2&lt;/div&gt;
  &lt;div class="block-item"&gt;3&lt;/div&gt;
  &lt;div class="block-item"&gt;4&lt;/div&gt;
  &lt;div class="block-item"&gt;5&lt;/div&gt;
  &lt;div class="block-item"&gt;6&lt;/div&gt;
  &lt;div class="block-item"&gt;7&lt;/div&gt;
  &lt;div class="block-item"&gt;8&lt;/div&gt;
  &lt;div class="block-item"&gt;9&lt;/div&gt;
  &lt;div class="block-item"&gt;10&lt;/div&gt;
  &lt;div class="block-item"&gt;11&lt;/div&gt;
  &lt;div class="block-item"&gt;12&lt;/div&gt;
  &lt;div class="block-item"&gt;13&lt;/div&gt;
  &lt;div class="block-item"&gt;14&lt;/div&gt;
  &lt;div class="block-item"&gt;15&lt;/div&gt;
  &lt;div class="block-item"&gt;16&lt;/div&gt;
  &lt;div class="block-item"&gt;17&lt;/div&gt;
  &lt;div class="block-item"&gt;18&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I came out this function but it crashes any browser on it,</p>
  
  <pre><code>function opacity_test(index)
  {
      $('.block-item').eq( index ).animate({
          opacity:0
      },500);
  
      setInterval( function() {
          opacity_test(index + 1);
      }, 1000 );
  }
  </code></pre>
  
  <p>Thanks.</p>