Question

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

ExecutorService

我也在CSS样式中使用此代码

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

这是我的JS功能：

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

使用它，所有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);

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/

HTML，CSS＆amp; JS动画多个进度条

2 个答案: