使用jQuery动画Bootstrap进度条宽度

我想在2.5秒内将进度条的宽度从0％设置为70％。 但是，下面的代码会在2.5秒延迟后立即将宽度更改为70％。 我错过了什么？

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

JSFiddle： http ： //jsfiddle.net/WEYKL/

Answer 1

问题在于默认的Bootstrap过渡效果，它会为width属性的任何更新设置动画。

如果你通过压制相应的样式来关闭它，它将正常工作，例如：

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

演示： http ： //jsfiddle.net/WEYKL/1/

Answer 2

如果使用bootstrap进度条，那非常容易 ，

只将atria-valuenow =“percent_required％”添加到带有“progress-bar”类的div，如下所示：

接下来，在脚本上：

重新加载，开始！

Answer 3

因此，通过CSS或jQuery调整转换效果更有意义。

 .progress-bar { -webkit-transition: width 2.5s ease; transition: width 2.5s ease; } 

只需更改宽度值即可。

 $(".progress-bar").css('width', '70%'); 

Answer 4

你可以通过添加：

 .progress .progress-bar { transition: unset; } 

 var delay = 500; $(".progress-bar").each(function(i) { $(this).delay(delay * i).animate({ width: $(this).attr('aria-valuenow') + '%' }, delay); $(this).prop('Counter', 0).animate({ Counter: $(this).text() }, { duration: delay, // easing: 'swing', step: function(now) { $(this).text(Math.ceil(now) + '%'); } }); }); 

 .progress { margin-bottom: 20px; } .progress-bar { width: 0; } .bg-purple { background-color: #825CD6 !important; } .progress .progress-bar { transition: unset; } 

    
 
Bootstrap 4 Progress Bars
 
 
70
 
 
 
50
 
 
 
90