使用動畫tp平滑地更新進度條

Question

我正在使用傳遞數字百分比的API，因爲它正在加載。目前我正在使用jQuery的css方法來更新進度條在加載時的寬度。這個效果很好，但寬度每隔半秒左右就會更新一次，這是不穩定的。

NEEDATA.onScriptEvent('progress', function(percentage, status, filename){ 
     var progressStatus = percentage; 
     var round = Math.round(progressStatus.percentage * 100)/100; 

// here is the part that needs some work 

     $("#percentage div").css({ 
     'width' : round + '%' 
     }); 
}); 

我想用easing順利地動畫它。我曾嘗試使用動畫而不是css，但它非常生澀。百分比不會很快通過，所以動畫不平滑。

$("#percentage div").animate({ 
     'width' : round + '%' 
    }, 100); 

我想弄清楚的是百分比數據被傳遞給它，補償在該數據被傳遞給它的相當緩慢之間順利動畫這個進度條更好的方法。

Answer 1

試試這個：

var div = $('#percentage div'); 
if(!div.is(':animated')){ 
    div.animate({ 
     'width' : round + '%' 
    }, 100); 
}