1

右から左にスライドする簡単なアニメーションを持つ 3 つの div があります。関数を適用して間隔を設定する方法。

たとえば、2 番目の div は 1 番目の遅延でスライドし、3 番目の後にそのようにアニメーション化する必要があります。

HTML

<div class="Objects"></div>
<div class="Objects"></div>
<div class="Objects"></div>
<button class="trigger">Click Me</button>

CSS

.Objects{ width:200px; height:100px; background:#ccc; margin:10px; position:relative; left:500px;}

脚本

$(".trigger").click(function () {
  $(".Objects").animate({left:'0px'});
});

ワーキングリンク

http://jsfiddle.net/vivekdx/xZn3u/

4

3 に答える 3

3

setTimeout コマンドを使用しています。指定された遅延の後に関数を実行します。

選択した div を含む jQuery 配列を反復処理しながら、基本遅延に現在のインデックスを掛けます。したがって、slideLeft関数へのすべての呼び出しは、反復ごとにさらに遅延します。

スクリプトを次のように変更しました。

var slideLeft = function($item) {
    $item.animate({left:'0px'});
}

$(".trigger").click(function () {
//      $(".Objects").animate({left:'0px'});

    $(".Objects").each(function(index, item) {
        setTimeout(slideLeft, 200 * (index + 1), $(item));
    });

});

あなたのフィドルに基づく動作デモ: http://jsfiddle.net/xZn3u/1/

于 2013-07-25T06:35:46.787 に答える
2

次のコードを試してみてください..

$(".trigger").click(function (){
   var el = $(".Objects");
   $.each( el, function( key, value ) {
     var tm = 1000*key;
     $(value).delay(tm).animate({left:'0px'});
   });
});

出力を確認するには、次のリンクを参照してください。

http://jsfiddle.net/xZn3u/4/

于 2013-07-25T06:48:27.777 に答える
0

jQuery の animate には、アニメーションが完了すると呼び出される「complete」プロパティがあります。例：

$item.animate({left:'0px'}, function() {
    // next call
});

APIを参照

于 2013-07-25T06:45:49.170 に答える