如何在超时期间更改多个元素的CSS？ （多个进度条）

Question

我正在开发多个进度条，这些条是水平堆叠的，就像Instagram故事或Facebook故事一样，我正在尝试每隔4秒设置带有“ bar”类的第一个元素的宽度，然后更改带有“ bar”类的下一个元素。

示例：https://i.imgur.com/XUZuVhi.jpg

我尝试了以下代码：

count = 0;
setInterval(function() {
  while ($(".bar").css("width") != "100%") {
    count++
    for (i = 0; i < bar.length; i++) {
      bar[i].style.width = count + '%';
    }
  }
}, 4000);

Answer 1

花了一段时间才能弄清你的意思

一个接一个

var count = 0, len = $(".bar").length, w = 1;
var tId = setInterval(function() {
  $(".bar").eq(count).css({ width: w + '%' });
  w++;
  if (w>=100) { 
    w = 0; count++;
    if (count>=len) clearInterval(tId); // stop
  }
}, 200);

.red {
  background-color: red;
  width: 0;
}

.yellow {
  background-color: yellow;
  width: 0;
}

.green {
  background-color: green;
  width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="bar red">&nbsp;</div>
  <div class="bar yellow">&nbsp;</div>
  <div class="bar green">&nbsp;</div>
</div>

---

一个接一个

var count = 0, len = $(".bar").length, w = 1;
var tId = setInterval(function() {
  $(".bar").eq(count).css({ width: w + '%' });
  count++;
  if (count >= len) { 
    count = 0; w++; 
    if (w>=100) clearInterval(tId); // stop
  }
}, 1000);

.red {
  background-color: red;
  width: 0;
}

.yellow {
  background-color: yellow;
  width: 0;
}

.green {
  background-color: green;
  width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="bar red">&nbsp;</div>
  <div class="bar yellow">&nbsp;</div>
  <div class="bar green">&nbsp;</div>
</div>