各リストアイテムに遅延付きのCSSアニメーションを追加する

Question

指定された順序付けられていないlist/dom要素を経由し、各リスト項目/子にCSS（アニメーション）クラスを割り当てるjqueryを記述しようとしています。また、.addClassの間に調整可能な遅延時間を設定したい。

私が試したことはすべて悲惨に失敗しました。例えば

：

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

は次のようになります。

<ul> 
    <li class="animation">Item 1</li> 
    (50ms delay) 
    <li class="animation">Item 2</li> 
    (50ms delay) 
    <li class="animation">Item 3</li> 
    (50ms delay) 
    <li class="animation">Item 4</li> 
    (50ms delay) 
</ul> 

任意の考え？ここ

Answer 1

これは動作します：

$('ul li').each(function(i){ 
    var t = $(this); 
    setTimeout(function(){ t.addClass('animation'); }, (i+1) * 50); 
}); 

http://jsfiddle.net/GCHSW/1/

Answer 2

を上記の答えは<ul>と<li>シナリオに近づいての良い仕事をしていますが、それはより詳細な状況のために非常にうまく機能しません。これを実際にダイヤルするには、ターゲット要素を受け入れ、入力として遅延する機能にラップする必要があります。関数は、その要素を取る、とのために...ため息遅延でタイムアウトを設定します、これはあまりにも関与している私はちょうどそれをコーディングする必要があります

function applyAnimation(element, delay){ 
setTimeout(function(){ $(element).addClass('animation'); }, delay); 
var children = document.getElementById(id).children; 
for(var i = 0; i < children.length; i++){ 
    applyAnimation(children[i],(2+i) * delay);//2+i:0 fails, 1 would be parent, 2 is child 
} 
} 

Answer 3

がこれを考えてみましょう：

HTML：

<ul id="myList"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

Javascriptを：http://jsfiddle.net/DZPn7/2/

：

$("#myList li").each(function(i, li) { 
    var $list = $(this).closest('ul'); 
    $list.queue(function() { 
     $(li).addClass('animation'); 
     $list.dequeue(); 
    }).delay(50); 
}); 

がフィドルを参照してください。

これは簡潔で効率的ではありませんが、jQuery純粋主義の解決策です。

Answer 4

アニメーションには2つの方法があります（jQueryとCSS3 Transitions + .addClass）。

だから、あなたは、例えばjQueryのを試すことができます。

$('#myList li').each(function(i){ 
    $(this).delay(50*i).animate({opacity: 1},250); 
}); 

とCSS3トランジションを使用して：

$('#myList li').not('.animation').each(function(i){ 
    setTimeout(function(){ 
     $('#myList li').eq(i).addClass('animation'); 
    },50*i); 
}); 

お楽しみください！