1

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

たとえば、画面上で要素を移動する必要があります。それが終わったら、次のものに移動します。

これはおそらくアイテムのリストです.. 適切な位置に.. 1つずつ。

誰か助けてくれませんか？

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

更新: 簡単な例。

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

一つ一つフェードインさせていきたいです。SO アイテム 1 がフェードインします。それが完了すると、アイテム 2 がフェードインします。

jQuery を使用して、いくつかの Flash の「ページ ビルド」タイプのアニメーションを HTML に変換しています。そのため、複数の要素でアニメーションをキューに入れる必要があります。ボックスを表示させ、その上にテキストをスライドさせるなど..

4

3 に答える 3

5

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

いくつかの div を次々にフェードアウトさせたいとします。各フェードには 800 ミリ秒かかります。次に、最初の 1 つをすぐに開始し、2 番目の 1 つを 800 ミリ秒の遅延で開始し (他の終了時に開始されます)、3 番目を開始できます。 1つは1600ミリ秒の遅延など...

firebug または webkit コンソールで実行できる自動化された例 (例のアイデア jAndy! =D が気に入りました) は次のとおりです。

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

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

于 2011-02-03T07:00:39.863 に答える
1

ポール アイリッシュは、このトピックに関する素晴らしい記事を書きました。

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'))

好みに合わせて調整してください。

于 2011-04-19T03:01:31.413 に答える
0

実際、すべての jQuery fx methods(を含む.animate()) は、complete callback. これは、アニメーションが完了した後に、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
        });
    });
});

アップデート

コメントを参照して、これを firebug または webkit コンソールに入力します。

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

これは、Stackoverflow 側のいくつかの上位 div 要素で機能します。

于 2011-02-03T06:02:56.840 に答える