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

我已经复制了你的代码并且工作正常。

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以获取更多信息

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

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

2 个答案: