title: sequential effects on list-items in jQuery
body: <p>here's the snippet of my code :</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="links"&gt;Links&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I use css to style them horizontally (menu-like) and what I would like to do is to animate all the list-items of the <code>&lt;ul&gt;</code> element. I top them when the dom is ready and animate them to the bottom to attract users' eyes when the entire page is loaded.</p>
  
  <p>here's the jquery code:</p>
  
  <pre><code>$(function(){
      $("ul li").css('top', '-40px'); //items are in relative position
  
      $(window).bind("load", items_animate, false);
  });
  
  function items_animate(){
         ... //I'd like to animate each &lt;li&gt; of the &lt;ul&gt; changing 'top' to '0px' but not simultaneously, I want to declare a DELAY between each animation (&lt;li&gt;'s get down in a row)
  }
  </code></pre>
  
  <p>I know how to sequence effects with queue() or calling functions one by one but on only one element, I'm lost in this case..</p>
  
  <p><strong>EDIT :</strong> for those who are interested, here's the code to accomplish this sequence, thanks to Joseph </p>
  
  <pre><code>var animationDelay = 600;
  var offset = 200;
  
  function blah(meh) {
      setTimeout(function(){
          $(meh).animate({
              opacity: "0"
          }, animationDelay);
      },$(meh).index() * offset)
  }
  
  $("li").each(function(){
      blah(this);
  })
  </code></pre>