jquery - 对进度条执行 jQuery.animate() 时，在 7 秒内从 0 计数到 100

Question

我有一个简单的进度条，宽度必须在 7 秒内从 0% 变为 100%。我处理操作没有问题，只需要 7 秒长。

代码其实很简单:

$('.progress-bar').animate({width:'100%'}, 7000);

进度的宽度是 0%，所以我只需将其动画设置为 100%。我的问题是，我还需要从 0 数到 100 来显示百分比，就像显示进度一样(7 秒内)。

我该怎么做？

谢谢!

Answer 1

http://jsfiddle.net/C23YM/9/

基本上将一个函数传递给 step 选项，并在每个 step 调用中检查 width 是否是正在动画的，因为您可能例如，有两个动画属性。

来自docs :

Note that the step function is called for each animated property on each animated element. For example, given two list items, the step function fires four times at each step of the animation

$('.progress-bar').animate(
    {width:'100%'}, 
    {
        duration:7000,
        step: function(now, fx) {
           if(fx.prop == 'width') {
               $(this).html(Math.round(now * 100) / 100 + '%');
           }
        }
    }        
);​