jQuery fadeIn/fadeOut loop problem
- by liebgott
Hi. I'm trying to do a sequentiall 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!
