动画时打印进度条的百分比答案

【问题标题】：Printing Progress Bar's percentage when animated动画时打印进度条的百分比
【发布时间】：2013-03-29 16:07:40
【问题描述】：

我正在开发一个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 完成等等。有人帮助我吗？

【问题讨论】：

不要使用 animate，而是编写自己的方法，使用 $(elem).css('width', iterator + '%') 循环并将宽度增加 1%。在每次迭代中，还将 $(".text").html() 设置为您的迭代器值。
你的意思是我必须编写一个函数，包括称为“迭代器”的参数或其他什么？

标签： jquery html css progress-bar progress

【解决方案1】：

您可以使用动画函数的 step 选项：

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

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

【讨论】：