将延迟的CSS动画添加到每个列表项

Question

我正在尝试编写一些jquery,它将通过指定的无序列表/ dom元素并为每个列表项/子项分配一个CSS(动画)类.我还想在.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/