11

dom 内のさまざまなオブジェクトに対して実行したいアニメーションがいくつかあります。

順番に出してほしい。

私はこのようにしたくありません：

$('#first').show(800, function () 
{ $('#second').show(800, function () {...etc...});

すべてのアニメーション (および CPU を集中的に使用する関数) をある種のキュー オブジェクトに追加して、それらが順番に実行されるようにしたいと考えています。

4

4 に答える 4

9

説明した方法を使用したくない理由がわかりません。純粋に組織的な観点からであれば、匿名関数を使用する必要はありません

function showFirst() {
  $('#first').show(800, showSecond);
}

function showSecond() {
  $('#second').show(800, showThird);
}

function showThird() {
  $('#third').show(800);
}

function startAnimation() {
  showFirst();
}
于 2009-03-20T21:42:30.940 に答える
2

先日、このプラグインhttp://plugins.jquery.com/project/timersを使用して同様のことを行いました。基本的に、一致するすべての dom 要素を反復処理し、インデックス * ミリ秒がカウントされると、それぞれアニメーションを実行します。

コードは次のようなものでした。

HTML:

<div id="wrapper">
   <div>These</div>
   <div>Show</div>
   <div>In</div>
   <div>Order</div>
</div>

jQuery

$("#wrapper div").foreach( function(i) {
    i = i + 1;
    $(this).oneTime(800 * i, "show", function()  {
        $(this).show();
    });
});
于 2009-03-21T05:00:20.060 に答える
2

jQuery Effectsのドキュメントを確認してください。キューイングに関することは、必要なことを行う必要があります。

于 2009-03-20T21:47:53.797 に答える
-2

これも機能します。

            $('#first').show(800);
            setTimeout("$('#second').show(800)", 800);
            setTimeout("$('#third').show(800)", 1600);
            setTimeout("$('#forth').show(800)", 2400);

純粋にシーケンシャルではないことは知っていますが、読みやすく、柔軟性の高いアニメーションを引き立たせることができます。

注：実行するコードを引用符で囲む必要があることに注意してください。前のコードでは二重引用符を使用していませんが、使用した場合は、次のようにそれらをエスケープする必要があります。

            $('#first').animate({"width":"100px"}, 500);
            setTimeout("$('#second').animate({\"width\":\"100px\"}, 500)", 800);
            setTimeout("$('#third').animate({\"width\":\"100px\"}, 500)", 1600);
            setTimeout("$('#forth').animate({\"width\":\"100px\"}, 500)", 2400);

通常、使用する引用符を交互に使用することでこれを回避できますが、言及する価値はあります。

更新：ここに別のオプションがあり、jqueryの約束をここでチェックする価値もあります

            $('#first').show(800);
            $('#second').delay(800).show(800);
            $('#third').delay(1600).show(800);
            $('#forth').delay(2400).show(800);
于 2012-06-04T13:55:52.757 に答える