title: How to add a class, one by one, to each element in a list
body: <p>So I want to add a class to each element in a list(specifically the <code>&lt;a&gt;</code> in the list items), but one at a time. I am doing this because the <code>&lt;a&gt;</code> have a CSS transition on them and I want to have them animate one at a time. So item1 animates, then item2 animates, then item3 animates... Here is what I could attempt to come up with so far.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a&gt;item1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;item2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;item3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery/js:</p>
  
  <pre><code>animateItems();
  function animateItems(){
         $('ul li a').each(function() {
            $(this).addClass('animate'); //This doesn't run one at a time
         });
      }
  </code></pre>
  
  <p>I feel like this is leading in the direction of recursion, but not sure really. </p>
  
  <p><strong>update:</strong> I just realized that this may be harder than i thought because jQuery needs to know about the css transition time doesnt it? <strong>Is there a way to add the classes with a setTimeout() until it begins the next addClass()?</strong> Does each() create an array or jQuery object that I can iterate through?</p>