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个条都被动画处理了，但我想用不同的值分别为每个条添加动画效果。

- Tom Withers

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);

- SeinopSys

Answer 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/

- Thomas