0

親divに3つの子div要素があります

<div id="fatherDiv">
    //First Div
    <div class="childrenDiv"></div>
    //Second Div
    <div class="childrenDiv"></div>
    //Third Div
    <div class="childrenDiv"></div>
</div>

jQueryを使用して、各子を順番にアニメーション化しようとしています。したがって、最初の div はそれ自体でアニメーション化され、最初の div が完了すると 2 番目の div が移動し、最後に 2 番目の div が完了した後に 3 番目が移動します。どうすればそれができるでしょうか？

編集

申し訳ありませんが、明確にするために、私がアニメーションと言うとき、私は .animate(); を意味します。この例では、下に、たとえば 10 ピクセル移動させることができると思います。

4

2 に答える 2

4

Fiddle

これでうまくいくはずです。

function anim($child) {
    //look for the next sibling
    var $next = $child.next('.childrenDiv');
    $child.animate({
        'top':'+=10px'
    }, function() {
        //if there was a next child, then animate it
        if ($next.length > 0)
            anim($next);
    });
}

//start the animation with the first .childrenDiv child of #fatherDiv
anim($('#fatherDiv .childrenDiv:first-child'));

anim繰り返しコールバックを使用して次のコールバックを選択し、.childrenDivアニメーション化する小さなメソッドを宣言するだけです。の最初の子を使用して呼び出します#fatherDiv。

これは単なる基本的な再帰であり、アニメーション化する次の兄弟がない場合が基本ケースです。

于 2013-09-13T19:07:11.487 に答える
1

jQuery UI .animate() ドキュメントから

完全な関数を介してコールバックを使用するだけで、好きな順序でアニメーションを実行できます。

完全な機能

指定した場合、アニメーションが完了すると、完全なコールバック関数が起動されます。これは、異なるアニメーションを順番に並べるのに役立ちます。コールバックには引数は送信されませんが、アニメーション化される DOM 要素に設定されます。複数の要素がアニメーション化されている場合、コールバックは、アニメーション全体に対して 1 回ではなく、一致した要素ごとに 1 回実行されます。

于 2013-09-13T19:11:40.037 に答える