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”。

jQuery fadeIn / fadeOut循环问题

1 个答案: