1

ページ上の特定の要素に多数の jQuery アニメーション効果を適用しています。現在、私のコードは次のようになっています。

jQuery("#bgd_balance").animate({backgroundPositionY: "0px",},800,"swing");
jQuery(".balance_left_box").delay(2000).slideDown(200,"easeInCirc");
jQuery(".balance_left_box p.first-line").delay(2400).slideDown(600,"easeInCirc");
jQuery(".balance_left_box").delay(1000).animate({height:"270px",top:"64px",100,"easeInCirc");

私が直面している問題は、特定の要素の遅延を微調整しているときに、すべてを調べて、それに応じて他のすべての遅延を調整する必要があることです。

代わりに次のようなものを使用することは可能ですか (疑似コード):

queue.add(
       delay(2000),
       jQuery(".balance_left_box").slideDown(200,"easeInCirc"),
       delay(2000),
       jQuery(".balance_left_box p.first-line").slideDown(600,"easeInCirc");
       delay(1000),                         
       jQuery(".balance_left_box").animate({height:"270px", top:"64px"},100,"easeInCirc");
).run();

コードがそれ自体を物語っていることを願っています。

呼び出しにコールバック関数を追加することでこの「キューイング」を実現できることはわかっていanimate()ますが、結果のコードは非常にかさばり、IMO を読むのが難しくなります。

4

1 に答える 1

3

誰かが jQuery.queue を説明してくれますかに関する私の回答を見たいと思うかもしれませんが、空のオブジェクトでキューを使用して非常に簡単なキューを作成する方法の簡単な例を次に示します。

var tempQueue = jQuery({});

tempQueue.delay( 2000 );
tempQueue.queue( function( next ) {
    // note using the callback on the animation to call the "next" function in the queue
    jQuery( ".balance_left_box" ).slideDown( 200, "easeInCirc", next );
});

tempQueue.delay( 2000 );
tempQueue.queue( function( next ) {
    jQuery( ".balance_left_box p.first-line" ).slideDown( 600, "easeInCirc", next );
});
tempQueue.delay( 1000 );
tempQueue.queue( function( next ) {
    jQuery( ".balance_left_box" ).animate({
        height: "270px",
        top: "64px"
    }, 100, "easeInCirc", next );
});
于 2012-07-10T18:56:00.480 に答える