javascript - HTML、CSS 和 JS 动画多个进度条

Question

所以我试图在一个页面上设置多个进度条的动画，这是我的进度条的 HTML:

<div class="col-md-5">
  <p>HTML & CSS</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 50%;"></div>
  </div>
  <p>C#</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 20%;"></div>
  </div>
  <p>WordPress</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 30%;"></div>
  </div>
  <p>Photoshop</p>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width: 20%;"></div>
  </div>
</div>

我也在我的 CSS 样式中使用了这段代码

.progress.active .progress-bar {
   -webkit-transition: none !important;
   transition: none !important;
 }

这是我的 JS 函数:

$(".progress-bar").animate({width: "10%"}, 2500);

使用它，所有 4 个条都是动画的，但我想用不同的值为每个条设置动画。

Answer 1

您可以使用 .eq() 将单个柱作为目标，它将索引作为参数来指定您想要的柱。

$(".progress-bar").eq(0); // First bar
$(".progress-bar").eq(1); // Second bar

从这里开始，只需对所选元素调用 animate 方法即可。存储初始的 $(".progress-bar") 调用也被认为是好的做法。

var $bars = $(".progress-bar");
$bars.eq(0).animate({width: "10%"}, 2500);
$bars.eq(1).animate({width: "5%"}, 2500);