1

jQueryのNoob。

画像をフェードインおよびフェードアウトさせることを目的として、画像ギャラリーを循環しようとしています。

これが私のJSFiddleです。各画像fadeTo（arg1）を
クリックしてからfadeTo（args2）をクリックします。 しかし、私は彼らに一つずつ行ってもらいたい。 おそらく、チェーンに追加する必要がありますか？#gallery

delay

どんな助けでも大歓迎です。

4

1 に答える 1

1

jQueryアニメーション（javascriptのほとんどのものと同様）は非同期です。つまり、アクションが終了する前に関数呼び出しが返されます。$('img').eachある意味で、ループの各反復は次のように考えることができます。

  • jQueryは、 1つの要素にthisバインドされた関数を呼び出しますimg
  • あなたの関数fadeは$(this)
  • 次に、jQueryは、実行するアニメーションをスケジュールするようにブラウザに要求します
  • 関数は

次に、すべての反復が終了した後、ブラウザはアニメーションを画面上で同時に発生させ始めます（すべてがスケジュールされているため）。

fadeシーケンシャル動作を作成するには、関数にコールバックを与えることができます。

$('#gallery').click(function(evt) {
  var remainingImages = $("img").toArray();

  var processNext = function() {
    var image = remainingImages.shift();
    if(!image) return;

    // Add the next iteration as a callback to the animation
    $(image).fadeTo(500, .3).fadeTo(250, 1, processNext);
  };

  processNext();
});

次に、すべてのアニメーションを一度にスケジュールする代わりに、次のようになります。

  • 現在のすべてのimg要素がremainingImages配列に格納されます
  • processNext関数が呼び出され、配列から最初の画像が削除されます
  • 関数はを呼び出しfade、アニメーションの終了後$(image)に呼び出す必要のある関数（たまたまそれ自体）を提供します
  • jQueryはブラウザでアニメーションをスケジュールし、後で関数を実行するように指示します
  • アニメーションが終了すると、次の反復が実行されます

jsFiddleを更新しました

于 2012-10-03T03:00:30.223 に答える