jQuery fadeIn/fadeOut loop problem

Question

Hi. I'm trying to do a sequential animation with a loop....but i can't accomplish it in a smooth way (some "lag" problems).

jQuery

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();

CSS

.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;
}

HTML

<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>

<div class="cleaner"></div>

<div class="cajar"></div>
<div class="cajar"></div>
<div class="cajar"></div>

Thanks!

Answer 1

Well, the ".each()" calls are going to start up all the fades (etc.) pretty much at the same time, and then all those things are going to be stepping on eachother when they update "b". I think. Things like animations and "delay" calls return right away, putting the operations to be done in the effects queue(s) for affected elements.

Maybe you could try, instead of having a single "b", to use a ".data()" attribute directly associated with each affected element.