如何在超时期间更改多个元素的 css？(多个进度条)

Question

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

示例：https://i.stack.imgur.com/MOY42.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>