0

現在、JavaScriptを使用して長方形にアニメーションを追加しています。アニメーションが終了したら、ボックスを表示しないように設定します。これを行うためのコードについては、以下をご覧ください。

Javascript

$(document).ready(function() {  
  $(".filled-rectangle").stop().animate({top:'20px'}, 5000).queue(function(next){
    $(".filled-rectangle").css('display', 'none'); 
  });
});

次に、このようなコンテナにさらにいくつかのボックスを追加します。

HTML

<div class="container">
  <div class="filled-rectangle"></div>
</div>

上記のコードは現在、1つのdivで機能しています。.filled-rectangleさらにdivを追加し、すべてのdivで同じアニメーションを使用します。

4

1 に答える 1

1

複数の方法があります。ネストされたコールバックを使用できます。これにより、基本的に、別の関数が完了した後に関数を実行できます。クラス（ "filled-rectangle"）を使用するため、jqueryでクラスを選択し、クラスがアタッチされたすべての要素の配列を取得できます。この配列を使用して、それぞれを使用し、各オブジェクトに必要なアニメーションを遅らせることができますが、この場合、オブジェクトごとに異なるアニメーションを使用することはできません。同じである必要があります。

この例を見てください-> https://stackoverflow.com/a/4661858/1841875

要するに：

次々と異なるアニメーション：ネストされたコールバック/キュー

複数のオブジェクトで次々に同じアニメーション：アニメーションが遅れたeach（）

あなたの場合、each-delay-solutionを使用してください;）

于 2012-12-02T16:14:53.600 に答える