jQuery淡入/淡出循环问题答案

【问题标题】：jQuery fadeIn/fadeOut loop problemjQuery淡入/淡出循环问题
【发布时间】：2010-03-14 21:10:18
【问题描述】：

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

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>

谢谢！

【问题讨论】：

标签： jquery loops fadein fadeout

【解决方案1】：

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

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

【讨论】：