jquery - jQuery动画十进制数递增/递减

Question

我想一步一步地动画两个十进制数字之间的差异。

找到了Joss Crowcroft 的整数解决方案，效果很好，我在 jsfiddle 上做了示例。代码片段：

$({numberValue: 35}).animate({numberValue: 100}, {
    duration: 1000,
    easing: 'linear',
    step: function() { 
        $('#dynamic-number').text(Math.ceil(this.numberValue)); 
    }
});

但是，如果我想为例如数字 2.85 到 3.25 设置动画，则无法以这种方式完成。必须有动画两个部分，整数和小数。除了整数和小数的分开动画之外，它可以以更简单的方式制作吗？

Answer 1

你的意思是这样吗？

var currentNumber = $('#dynamic-number').text();

$({numberValue: currentNumber}).animate({numberValue: 100}, {
    duration: 8000,
    easing: 'linear',
    step: function() { 
        $('#dynamic-number').text(Math.ceil(this.numberValue*100)/100); 
    }
});

Answer 2

尝试这个

var currentNumber = $('#dynamic-number').text();

$({numberValue: currentNumber}).animate({numberValue: 100}, {
duration: 8000,
easing: 'linear',
step: function (now) {
        $('#dynamic-number').text(now.toFixed(2)); 
}
});

这是小提琴

Answer 3

 <span id="counter">30</span>
 <span id="counter">25</span>

$("div#counter").each(function( index,element ) {
        var currentNumber = $(element).text();
        $({numberValue: 0}).animate({numberValue: currentNumber}, {
            duration: 1200,
            easing: 'linear',
            step: function (now) {
                $(element).text(now.toFixed(0));
            }
        });
    });

Answer 4

抱歉英语不好，我阅读了所有答案并尝试使用更大的十进制数字，它无法正常工作。为什么它没有结束应该是确切的结束编号。

                    $({ Counter: 1.0000138138}).animate({
                  Counter: 1.0000167238
                }, {
                  duration: 1000,
                  easing: 'linear',
                  step: function() {

                    $('#dynamic-number').html(parseFloat(this.Counter).toFixed(10));
                  }
                });

见小提琴： http: //jsfiddle.net/98qncoLr/1/只是想知道为什么这会因较大的十进制数字而失败..