添加CSS动画延迟到每个列表项 [英] Adding CSS animation with delay to each list item

问题描述

我试着写一些jQuery，将通过指定的无序列表/ DOM元素，并指定一个CSS（动画）类，每个列表项/子。我也想使.addClass之间的可调延迟时间。

I'm trying to write some jquery that will go through a specified unordered list / dom element and assign a CSS (animation) class to each list item / child. I also want to make an adjustable delay time between the .addClass.

我试过一切都悲惨地失败了。

Everything I've tried has failed miserably.

例如：

<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>

有什么想法？

推荐答案

这在这里工作的：

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

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

这篇关于添加CSS动画延迟到每个列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！