jQuery fadeIn/fadeOut 循环问题

Question

我正在尝试用循环制作顺序动画......但我无法以顺利的方式完成它（一些“滞后”问题）。

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>

谢谢！

Answer 1

好吧，“.each()”调用将几乎同时启动所有淡入淡出（等等），然后所有这些东西在更新“b”时都会互相踩踏。我认为。动画和“延迟”调用之类的东西会立即返回，将要完成的操作放入受影响元素的效果队列中。

也许您可以尝试使用与每个受影响的元素直接关联的“.data()”属性，而不是使用单个“b”。