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

我正在尝试编写一些jquery，它将遍历指定的无序列表/ dom元素，并为每个列表项/子项分配一个CSS（动画）类。 我还想在.addClass之间设置一个可调节的延迟时间。

我尝试过的一切都惨遭失败。

例如：

 
Item 1
 
Item 2
 
Item 3
 
Item 4
  

变为：

 
 
Item 1
 (50ms delay) 
Item 2
 (50ms delay) 
Item 3
 (50ms delay) 
Item 4
 (50ms delay)  

有什么想法吗？

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

考虑一下：

HTML：

 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
  

使用Javascript：

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

见小提琴： http ： //jsfiddle.net/DZPn7/2/

虽然这既不简洁也不高效，但它是jQuery纯粹主义者的解决方案。

Answer 3

我有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); }); 

请享用！

Answer 4

虽然上面的答案很好地接近了

和

场景，但对于更详细的情况它不会很好。 要真正拨入此function，该function应包含在一个接受目标元素和延迟作为输入的函数中。 然后该函数将获取该元素，并设置超时延迟…叹息，这太涉及我应该只编码它：

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