Question

我正在创建一个包含多个bootstrap 3进度条的页面，显示不同的％stats。

我正试图让他们每个人从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") + "%";
        }
    )
});

使用jQuery动画Bootstrap 3进度条

1 个答案: