javascript - 为每个选定元素设置不同的超时

Question

我目前正在<li>使用此脚本向项目添加类名“动画”：

$('.list-blocks li').addClass('animate');

但是这个脚本会立即将类设置为选定的元素。

如何使用一秒钟的缓冲区将类添加到下一个选定元素？

例如：页面加载后，脚本首先给出li“animate”类。1 秒后，第二个li获得类“动画”。2 秒后，第三个li获得“动画”类。

我怎样才能达到这个效果？

Answer 1

循环所有元素并设置超时。

$('.list-blocks li').each(function(index, elm) {
    setTimeout(function () {
        $(elm).addClass('animate');
    }, index*1000);
});

应该管用。请参阅http://api.jquery.com/each/和https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout

Answer 2

尝试：

$('.list-blocks li').each(function (index) {
  var item = $(this);
  setTimeout(function () {
    item.addClass('animate');
  }, index * 1000);
});

演示