HTML, CSS & JS Animate Multiple Progress bars

HTML, CSS & JS Animate Multiple Progress bars

本文关键字：Animate Multiple Progress bars JS CSS amp HTML      更新时间：2023-09-26

所以我正在尝试在一个页面上对多个进度条进行动画处理，这是我的进度条的 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 个条形都进行了动画处理，但我想用不同的值对每个条形进行动画处理。

您可以使用

.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);
这样

你也可以这样做。

$( 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/

相关文章：