使用计时器更改类中所有<div>的CSS样式

Question

我有很多div

.led{
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 1;
    float: left;
    margin: 5px 5px;
    opacity: 0;
}
<div class="led" id="id1"></div>
<div class="led" id="id2"></div>
<div class="led" id="id3"></div>

我希望将opacity设置为一个接一个，每个之间延迟1秒。我试过这个功能，但它没有用。

<script type="text/javascript">
    var leds = $(".led");
    for (var i=0; i<leds.length; i++) {
        setTimeout(function (){
        alert();
        $('#' + leds[i]).css('opacity' , '1');
        }, 1000);
    }
</script> 

Answer 1

工作代码：

＆＃13;

＆＃13;

var leds = $(".led");
for (var i = 0; i < leds.length; i++) {
  (function(idx) {
    setTimeout(function() {
      $('#' + leds[idx].id).css('opacity', '1');
    }, 1000 * idx);
  })(i)
}

＆＃13;

.led {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
  margin: 5px 5px;
  padding:15px;
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="led" id="id1">TEST 1</div>
<div class="led" id="id2">TEST 2</div>
<div class="led" id="id3">TEST 4</div>

＆＃13;

＆＃13;

＆＃13;

您的代码问题：

• 变量i始终引用3内的setTimeout，因为它绑定到函数外部的同一变量。我们可以使用IIFE修复它并将i作为参数传递给该函数。
• leds[i]指的是DOM元素，它不代表该元素的id。因此$('#' + leds[i])什么都不做。
• 此外，setTimeout时间需要与idx计数器的倍数，以便它们不会一次显示所有内容，但会延迟1000毫秒。

您也可以尝试这种过渡效果：

＆＃13;

＆＃13;

var leds = $(".led");
for (var i = 0; i < leds.length; i++) {
  (function(idx) {
    setTimeout(function() {
      $('#' + leds[idx].id).css('opacity', '1');
    }, 1000 * idx);
  })(i)
}

＆＃13;

.led {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
  margin: 5px 5px;
  padding: 15px;
  opacity: 0;
  transition: opacity .9s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="led" id="id1">TEST 1</div>
<div class="led" id="id2">TEST 2</div>
<div class="led" id="id3">TEST 4</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这将逐个设置每个元素的不透明度：

$(".led").each(function(index) {
    $(this).delay(1000*index).queue(function() { 
      $(this).css('opacity' , '1');
     })
});