Question

所以我想为列表中的每个元素添加一个类（特别是列表项中的<a>），但是一次只添加一个。我这样做是因为<a>有一个CSS转换，我想让它们一次动画一个。所以item1动画，然后item2动画，然后item3动画......这是我到目前为止可以试图想出来的。

HTML：

<ul>
    <li><a>item1</a></li>
    <li><a>item2</a></li>
    <li><a>item3</a></li>
    </ul>

的jQuery / JS：

animateItems();
function animateItems(){
       $('ul li a').each(function() {
          $(this).addClass('animate'); //This doesn't run one at a time
       });
    }

我觉得这是导致递归的方向，但不确定。

更新：我刚刚意识到这可能比我想象的更难，因为jQuery需要知道css转换时间不是吗？ 有没有办法用setTimeout（）添加类，直到它开始下一个addClass（）？每个（）是否创建了一个我可以迭代的数组或jQuery对象？

Answer 1

您可以使用setTimeout功能：

$('ul li a').each(function(i, el) {
   setTimeout(function() {
      $(el).addClass('...');
   }, i * 1000);
});

上面的代码假设CSS动画持续时间是1秒。你可以相应地改变它！

在this回调函数的上下文中注释：setTimeout不引用当前元素。您应该缓存this回调的each对象，或者使用引用集合中当前元素的each回调的第二个参数。

Answer 2

为什么不将动画持续时间放在变量中并使用setTimeout？

var animationDuration = 2000; // 2000 millieseconds

function animateItems(){
   $('ul li a').each(function(i, item) {
      setTimeout(function(){
        $(item).addClass('animate');
      }, i * animationDuration); // this multiplies the index by the duration so the handler is fired in sequence
   });
}

另一种选择是使用JavaScript Animation Events。

Answer 3

在javascript中，当你想要安排将来运行的代码时，你通常会使用setTimeout和setInterval函数，但是没有像“Thread.Sleep”那样的阻塞指令

animateItems();
function animateItems(){
   $('ul li a').each(function(i) {

       setTimeout(function(){
           console.log(i);
           $(this).addClass('animate'); //This doesn't run one at a time
       }, i * 1000);

   });
}

Answer 4

getElementsByClassName可以生成HTMlCollection，但不能使用for / in循环直接迭代，但foreach loop for HTMLCollection elements可能会提供一些见解。 To turn the HTMLCollection into an array，请参考此处。不幸的是，我对这些收藏品并不熟悉，也不能说太多。

你有一个数组迭代后应该很容易。应用每个动画，包括setTimeout。

如何将列逐个添加到列表中的每个元素

4 个答案: