title: Using SetTimeOut to fadeout a list of element tiling on each other
body: <p>Suppose that I have a list of elements tiling on each other using z-index. For example:</p>
  
  <pre><code>&lt;div id="lyrics"&gt;
     &lt;div class="lyric" style="z-index: 1000" val="2000"&gt;This is the first sentence&lt;/div&gt;
     &lt;div class="lyric" style="z-index: 100" val="2000"&gt;Second sentence is here&lt;/div&gt;
     &lt;div class="lyric" style="z-index: 10" val="0"&gt;And the third one&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to do this animation in which using jQuery to make the first lyric disappear (opacity goes to 0) in 2000ms, and then the next one, and so on until nothing left.</p>
  
  <p>The problem is, with this code below, it seems like all lyric elements vanish at once.</p>
  
  <pre><code>function sto(varx, delay) {
      setTimeout(function() {
          varx.fadeOut("fast");
      }, delay);
  }
  
  $(".lyric").each(function(){
      var delay = $(this).attr("val");
      sto($(this), 2000);
  });
  </code></pre>