title: jQuery fadeIn/fadeOut loop problem
body: <p>I'm trying to do a sequential animation with a loop....but i can't accomplish it in a smooth way (some "lag" problems).</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>var i = 0;
  var b = 0;
  
   var fades = function(){$(".caja").stop(0).each(function(){
  $(this).delay(i * 500).fadeIn('slow', function(){
    $(this).delay(5000).fadeOut('slow', function(){
        $(".cajar").delay(1000).each(function(){
          $(this).delay(b * 500).fadeIn('slow', function(){
              $(this).delay(5000).fadeOut('slow', fades());
              });
            b++;
        });
      });
    });
  i++;
  })}
  
  
  fades();
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.caja{
  width: 150px;
  height: 150px;
  background-color: black;
  float: left;
  margin: 0 10px 0 0;
  display: none;
  }
  
  .cajar{
  width: 150px;
  height: 150px;
  background-color: red;
  float: left;
  margin: 0 10px 0 0;
  display: none;
  }
  
  .cajav{
  width: 150px;
  height: 150px;
  background-color: green;
  float: left;
  margin: 0 10px 0 0;
  display: none;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="caja"&gt;&lt;/div&gt;
  &lt;div class="caja"&gt;&lt;/div&gt;
  &lt;div class="caja"&gt;&lt;/div&gt;
  
  &lt;div class="cleaner"&gt;&lt;/div&gt;
  
  &lt;div class="cajar"&gt;&lt;/div&gt;
  &lt;div class="cajar"&gt;&lt;/div&gt;
  &lt;div class="cajar"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>