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

Question

我正在尝试在 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% 之前完成。有人可以帮我解决这个问题吗？

Answer 1

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

在这里看小提琴

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

$("#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

查看类似的帖子以获取更多信息

Answer 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();