javascript - jquery延迟将类添加到多个元素

Question

我有 3 个类名为 gridbox 的 div 元素 我想延迟将一个类添加到所有 3 个元素中。

例如:

新类应该添加到所有 3 个 div 元素，每个元素之间有一个延迟。

我尝试了以下无效的代码。

$('.gridbox').addClass('animation').delay(1500);

这里有什么问题吗？

Answer 1

你可以尝试这样的事情:

var divs = $( '.gridbox' );
var index = 0;

var delay = setInterval( function(){
  if ( index <= divs.length ){
    $( divs[ index ] ).addClass( 'animation' );
    index += 1;
  }else{
    clearInterval( delay );
  }
}, 1500 );

我在这里做的是:

1. 提取所有元素并将它们存储在 divs 变量中。
2. 保存您当前使用的元素的索引。
3. 启动一个延迟 1.5 秒的 setTimeout 函数。
4. 如果我们不在元素列表的末尾，将类转换为 jQuery 元素后将其添加到相关元素。
5. 增加我们的索引变量。
6. 在我们遍历所有元素后停止 setTimeout。