jquery - 使用 jQuery 动画化 Bootstrap 3 进度条

Question

我正在制作一个带有 multible bootstrap 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 中的样式，所以我对第 1 条做了处理，但没有结果。我的控制台还显示“未捕获的类型错误: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") + "%";
        }
    )
});