HTML、CSS 和 JS 动画多个进度条答案

【问题标题】：HTML, CSS & JS Animate Multiple Progress barsHTML、CSS 和 JS 动画多个进度条
【发布时间】：2015-09-17 03:11:01
【问题描述】：

所以我试图在一页上制作多个进度条的动画，这是我的进度条的 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 个条都被动画化了，但我想用不同的值来动画每个条。

【问题讨论】：

标签： javascript jquery html css animation

【解决方案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);

【讨论】：

【解决方案2】：

这样你也可以做到。

$( document ).ready(function() {
    $(".progress-bar").each(function (index ) {
        if(index >=0 && index<=1)
        {
            $(this).animate({width: "5%"}, 2500);
        }
    })
});

http://jsfiddle.net/tridip/80cww0qr/

我们也可以随机增加进度条，其值在 1 到 100 之间

$(this).animate({width: Math.floor((Math.random() * 100) + 1) + "%"}, 2500);

http://jsfiddle.net/tridip/80cww0qr/1/

【讨论】：