使用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") + "%"; 
     } 
    ) 
});