title: .each() function with interval between each iteration
body: <p>Not sure if it is possible. The idea is very basic, list of buttons that onload start changing its background with a short interval and then repeat. I have a list of elements like:</p>
  
  <pre><code>&lt;div class="container"&gt;    
      &lt;div class="button"&gt;&lt;/div&gt;
      &lt;div class="button"&gt;&lt;/div&gt;
      &lt;div class="button"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Next I want to manipulate it one by one, change background and pass to next with short interval. The problem is that it applies changes to all of them at once.</p>
  
  <p>Here is the way I do it:</p>
  
  <pre><code>var element = $('.button');         
  
  element.each(function(){
      var thisObj = $(this);
  
      setInterval(function(){
          thisObj.css({
              'background':'#000'
          })
      }, 1000)
  }); 
  </code></pre>
  
  <p>And then simply repeat it till the mouseover event is detected.</p>
  
  <p>Could anyone suggest a way to do this? Thank you.</p>