Question

我想创建一个简单的css效果，为项添加类：

<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>

.item {
  opacity:0;
}

$(".item").each(function(index, element) {    
    console.log(element);
    $(element).css('opacity', 1).delay(1000);  
});

因此，如果我有5个不透明度为0的项目，我想按顺序将每个元素的opcaity设为1（延迟1秒）

有任何线索吗？

Answer 1

你需要链接功能。 :)您可以在.animate中使用setTimeout()或关闭：

time = 0;
$(".item").each(function(index, element) {
    console.log(element);
    (function (e, t) {
      setTimeout(function () {
        $(e).css('opacity', 1);
      }, t);
    })(element, time+=1000);
});

它有效：https://jsfiddle.net/u6e6mxL9/

Answer 2

尝试在此背景下使用setTimeout，

$(".item").each(function(index, element) {    
    setTimeout(function(){ 
       $(element).css('opacity', 1); 
    }, 1000 * index);
});

每次迭代都不需要创建范围，.each()会为您执行此操作。在内部，每个人都会通过提供callBack和index来调用传递的element函数。这实际上为你创造了一个范围。所以它会自动帮助我们摆脱因关闭造成的问题。

Jquery：如何按顺序添加类？

2 个答案:

DEMO