2010-12-16 10 views
1

と次々アニメイトのdiv要素の一つで右ここで私の前の質問参照してください:私の第二の答えを見るjQueryの-PT 2

Animate Divs One Right After the Other with Jquery

を....

誰がどのように書くように私に教えてもらえます私のコードは正しく、私は2つ以上のdivをアニメーション化することができますか?可能であれば、少なくとも4つのdivの例を教えてください。前もって感謝します。

答えて

3

共通クラスに、with .each()use .delay()を繰り返し、現在の繰り返しのインデックス番号に継続時間を掛けます。

例:http://jsfiddle.net/patrick_dw/jPeAp/

HTML

<div class="animation">Hello!</div> 
<div class="animation">Jquery Animate!</div> 
<div class="animation">Hello!</div> 
<div class="animation">Jquery Animate!</div> 

JS

$('.animation').each(function(index) { 
    $(this).delay(index * 700).fadeIn(); 
}); 

それが自動的に任意の数の要素のために動作しますこの方法です。

ループでは、index0, 1, 2, etc.になります。したがって、遅延は0, 700, 1400, etcになります。


EDIT:

あなたが要素に共通のクラス、そしてちょうどグループ1 multiple selectorにIDを与えることができない場合。

$('#animation1,#animation2,#animation3,#animation4').each(function(index) { 
    $(this).delay(index * 700).fadeIn(); 
}); 
+0

だから私はまったく異なるIDを持っていますか? – WillingLearner

+0

@WillingLearner:IDの代わりにクラスを使用する理由です。何らかの理由でクラスを割り当てることができない場合は、すべてのIDを持つ[マルチセレクタ](http://api.jquery.com/multiple-selector/)を作成してください。方法を示すために私の答えを更新します。 – user113716

+0

@WillingLeaner:この問題は解決しましたか? – user113716

関連する問題