使用animate顺利更新进度条

时间:2013-05-08 00:18:19

标签: jquery jquery-animate easing

我正在使用在加载时传递数字百分比的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 + '%'
       });
});

我想通过缓和来平滑地制作动画。我尝试使用animate而不是css,但它非常生涩。百分比没有快速通过,因此动画不顺畅。

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

我正在尝试找出一种更好的方法来平滑动画此进度条,因为百分比数据正在传递给它,从而补偿了传递数据的相当缓慢的时间间隔。

1 个答案:

答案 0 :(得分:0)

试试这个:

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