jQuery fadeIn/fadeOut loop problem

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 clas开发者_运维知识库s="cajar"></div>

Thanks!

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.