jquery - 动画时打印进度条的百分比

Question

我正在开发一个 html 看起来像这样的进度条

<div class="progressbar"><div class="text">%0 Completed</div>
            <div class="progressbar_inner"></div>
        </div>

并为此使用了这个 jquery 代码：

$(".progressbar_inner").animate({
                width:"20%"
            },100,function(){
                $(".text").html("%20 Completed");
                });

我的问题是：我想在动画开始和完成时打印进度条的百分比。像这样：%1 已完成 %2 已完成等等。有人帮助我吗？

Answer 1

您可以使用animate-function的step选项：

$(".progressbar_inner").animate(
    {width:"50%"},
    {duration: 1000,
     step: function(current_number){
       $(".text").html(Math.floor(current_number) + "% Completed");
     }
    }
);

看实际操作：http: //jsfiddle.net/willemvb/JRqVw/