CODEWITHSUNDEEP
jqueryloopsfadeinfadeout
liebgott
liebgott

Reputation: 21

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 class="cajar"></div>

Thanks!

Upvotes: 0

Views: 1254

Answers (1)

Pointy
Pointy

Reputation: 413717

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.

Upvotes: 1

Related Questions