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

Question

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

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

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

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

例如：加载页面后，脚本会为第一个li类提供“animate”。 1秒后，第二个li获得“animate”类。在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);
});

Demo