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

Set a different timeout to each selected element

本文关键字：超时 设置 元素      更新时间：2023-09-26

我目前正在使用以下脚本添加一个类名"animate"来<li>项目：

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

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

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

例如：加载页面后，脚本为第一个li提供类"animate"。1 秒后，第二个li获得类"animate"。2 秒后，第三个li获得类"动画"。

如何实现此效果？

遍历所有元素并设置超时。

$('.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

尝试：

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

演示

相关文章：