Javascript進度動畫

Question

我想用jQuery和javascript構建一個進度條。

它基本上是一個酒吧

<div id="progressbar"><div id="progress"></div> 
<div id="number">0%</div> 

當你點擊下一步按鈕（這在這裏心不是），它改變了進展div的寬度和使用CSS3它動畫好聽，但我在這裏的問題是數。我有5個屏幕，所以他們都是20％，我想動畫的數字，所以當酒吧變得更寬時，數字在0％到20％的所有數字中滑動，與酒吧動畫同時播放（0.5s）

我知道JQuery你可以使用innerHTML命令並將其從0％更改爲20％，但我想爲其設置動畫效果。

任何想法如何做到這一點？

Answer 1

1st獲取jQuery progressbar插件。 這裏是example。

然後創建像一個函數：

num = 0; 
function pbUpdate(value){ 
    if (num <= value) { 
      window.setInterval('updAnimation(' + value + ')', 10); 
    }else{ 
      clearTimeout; 
    } 
} 

function updAnimation(value){ 
    num += 1; 
    if (num <= value){ 
      $("#pb").reportprogress(num); 
    } 
} 

如果你看一下插件的例子，看看這段代碼，你應該到你想去的地方。我也使用過這段代碼。