jquery动画进度条百分比比进度条快（步骤）答案

【问题标题】：jquery animate progress bar percentage faster than the bar (step)jquery动画进度条百分比比进度条快（步骤）
【发布时间】：2013-10-10 12:05:58
【问题描述】：

我正在尝试在 jquery 中编写一个（假的）动画进度条，我正在使用函数 animate()，这是我的代码：

$("#progress_bar").animate({width:"100%"},{
                    step: function( now, fx ) {
                    var data =  Math.round(now);
                    $( "#percent" ).html(data+' % ')},duration:8000}//function pourcentages


                ); //animate

问题是关于百分比，它比条（这是一个从 0 到 100% 宽度的 div）要胖得多，计数器在条达到 100% 之前完成。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： jquery jquery-animate progress

【解决方案1】：

我已经复制了你的代码，它工作正常。

See fiddle here

您是否只为一个属性设置动画？如果没有，你可能想使用这样的东西：

$("#progress_bar").animate({width:"100%"},{
    step: function( now, fx ) {
        if(fx.prop == 'width') { //If you animate more than 1 property
            var data =  Math.round(now);
            $( "#percent" ).html(data+' % ');
        }
    },duration:8000}//function pourcentages 
); //animate

查看similar post 了解更多信息

【讨论】：

【解决方案2】：

即使您以 % 声明指令，它也可能以像素为单位进行动画处理。

您收到的输出很可能是元素在给定点的像素宽度。

试试这样的：

$("#progress_bar").animate({width:"100%"},{
    step: function( now, fx ) {
    var max_width = [...];
    var actual_width =  Math.round(now);
    var data_perc = (actual_width / max_width) * 100;

    $( "#percent" ).html(data_perc+' % ')},duration:8000}//function pourcentages


); //animate

将 [..] 替换为条形的最大宽度（可能是条形包装的宽度）。

例如：

var max_width = $('#bar_wrapper').width();

【讨论】：

感谢您的回答，即使我通过显示 % 来误导用户，但我的宽度仍然从 0 变为 100，它应该跟随栏......
好的，我发现了问题，我使用css3渐变作为我的栏的背景，它使动画更慢，没有渐变它可以完美地工作。