使用 animate 平滑更新进度条答案

【问题标题】：Using animate tp update a progress bar smoothly使用 animate 平滑更新进度条
【发布时间】：2013-05-08 08:29:45
【问题描述】：

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

我正在尝试找出一种更好的方法，以便在将百分比数据传递给它时平滑地为该进度条设置动画，以补偿数据传递给它的相当慢的间隔。

【问题讨论】：

标签： jquery jquery-animate easing

【解决方案1】：

试试这个：

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

【讨论】：

它确实得到了改进，但我想我正在寻找更多的缓和解决方案，因此它不会停止。