複数の要素にキューに入れられたアニメーション

Question

jQueryを使用して複数の要素にアニメーションをキューする方法を見つけようとしています。

たとえば、画面全体で要素を移動する必要があります。それが完了したら、次のものを移動してください。

これは、おそらく、その場所に落ちるアイテムの一覧です。

誰かが私を助けることができますか？

次のアニメーションを開始するには、各アニメーションのonComplete関数を使用する必要がありますか？

更新：単純な例。

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul> 

それぞれを1つずつフェードインしたいと思います。 SOアイテム1がフェードインします。それが完了すると、アイテム2はフェードインします。

jQueryを使用して、Flashの「ページビルド」タイプのアニメーションをHTMLに変換しています。ですから、複数の要素にアニメーションをキューイングする必要があります。

Answer 1

実際にすべてのjQuerys fx methods（.animate()を含む）は、complete callbackを提供しています。つまり、アニメーションが完了した後でnon-fxものを実行する必要があるときです。

あなただけのために実行される異なるfx効果を持つようにしたい場合は、それが

$('object').fadeOut(3000).slideDown(2500).slideUp(1500); 

のようなメソッドはjQueryのは、自動的にこの場所であなたの世話をするチェーンに十分です。これはあなたのコメントを参照する

$('object').fadeOut(3000, function() { 
    // do something here 
    $(this).slideDown(2500, function() { 
     // do something here 
     $(this).slideUp(1500, function() { 
      // do something here 
     }); 
    }); 
}); 

更新

ような呼び出しに変換され、あなたの放火犯やWebKitのコンソールに次のように入力します。

$('div').slice(4, 9).fadeOut(3333).fadeIn(5555).slideUp(2000).slideDown(1000); 

これは、いくつかの上位のdivに働くだろうStackoverflow側の要素

Answer 2

他の要素への影響の持続時間がわかっている場合は、すべての要素に遅延を追加できます。

divsを1つずつ消していくときに、フェードが800msかかるとしたら、最初のものをすぐに開始し、2番目のものを800msの遅延で開始することができます。 ！）、...三分の一〜1600msの遅れなどが

あなたは放火魔やWebKitのコンソールで実行することができ、このための自動化された例では、（あなたの例のアイデアjAndyを気に入っ= D）である：

$('div.nav li').each(function(i, elem) { 
    $(elem).delay(i * 800).fadeOut(800); 
}); 

（ナビゲーションリンクを見て実行：質問、タグ、ユーザー...）

Answer 3

ポール・アイリッシュは、このトピックに関する素晴らしい記事を書いた：あなたのフェードイン例えば

http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

を、あなたができる：

(function showNext(jq){ 
jq.eq(0).fadeIn("fast", function(){ 
    (jq=jq.slice(1)).length && showNext(jq); 
}); 
})($('ul > li')) 

味を調整します。