javascript - JQuery 小数计数动画

Question

我想知道我是否可以得到一些关于动画十进制计数器的帮助。

我的一切正常，但我希望计数达到 100，但它总是以随机数结束，例如 99.31% 或 99.56%。我尝试了很多不同的解决方案，但都没有奏效。

var percent_hours = $('.percent_hours').text();
$({numberValue: 0}).animate({numberValue: percent_hours}, {
    duration: 1100,
    easing: 'linear',
    step: function() {
        $('.percent_hours').text(Math.ceil(this.numberValue*100)/100 + "%");
    }

});

这是我的 jsfiddle .

如有任何帮助，我们将不胜感激。

提前谢谢你。

Answer 1

根据docs :

step:为每个动画元素的每个动画属性调用的函数。此函数提供了修改 Tween 对象以在设置之前更改属性值的机会。

也许我们正在寻找的是:

progress:在动画的每一步之后调用的函数，无论动画属性的数量如何，每个动画元素只调用一次(添加的版本:1.8)

投入使用:

var percent_hours = $('.percent_hours').text();
$({numberValue: 0}).animate({numberValue: percent_hours}, {
  duration: 1100,
  easing: 'linear',
  progress: function() {
    $('.percent_hours').text(Math.ceil(this.numberValue*100)/100 + "%");
  }
});

fiddle : http://jsfiddle.net/q9CuK/125/