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/

Answer 2

考虑一下：

HTML：

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

使用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 Transitions：

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

享受！

Answer 4

尽管上面的答案在接近<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
 }
}

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

4 个答案: