使用jQuery动画引导3个进度条

Question

即时制作带有多引导引导的页面3个进度条显示不同的％统计信息。

我试图让他们从0开始，并填充到酒吧的百分比，因为我已经设置了它们。像这样：

<h4>Bar 1</h4> 
<div class="progress"> 
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" ></div> 
</div> 

<h4>Bar 2</h4> 
<div class="progress"> 
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div> 
</div> 

我一直在寻找的方式与jQuery的动画，发现这个在我眼里几个选项至极应该可行，但不..我想以下几点：

$('.progress-bar').each(function() { 
    var bar_value = $(this).attr('aria-valuenow') + '%';     
    $(this).animate({ width: bar_value }, { duration: 2000, easing: 'easeOutCirc' }); 
}); 

的发布此代码的人说，要删除HTML内的样式，所以我用Bar 1做了，没有结果。另外我的控制台说：“Uncaught TypeError：n.easing [this.easing]不是一个函数”。

请帮帮我！

Link to jsFiddle

Answer 1

尝试使用此代码：

在这里，您可以看到工作演示：https://output.jsbin.com/xenawut

https://jsbin.com/xenawut/2/edit?html,css,js

$(document).ready(function() { 
    $('.progress .progress-bar').css("width", 
     function() { 
      return $(this).attr("aria-valuenow") + "%"; 
     } 
    ) 
});