0

ループを使用してシーケンシャル アニメーションを実行しようとしていますが、スムーズに実行できません (「ラグ」の問題がいくつかあります)。

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>

ありがとう！

4

1 に答える 1

1

さて、「。each（）」呼び出しは、すべてのフェード（など）をほぼ同時に起動し、「b」を更新すると、それらすべてが互いにステップします。おもう。アニメーションや「遅延」呼び出しなどはすぐに戻り、影響を受ける要素のエフェクトキューに操作を配置します。

たぶん、単一の「b」を使用する代わりに、影響を受ける各要素に直接関連付けられた「.data（）」属性を使用することを試みることができます。

于 2010-03-14T21:51:59.153 に答える