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，不能用这种方式完成。必须同时对整数和小数部分进行动画处理。除了分别为整数和小数执行动画之外，是否可以以更简单的方式完成？

- swolfish

Answer 1

试试这个

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

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

这里是代码示例。

- codereaper

Answer 2

你是说像这样吗？

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); 
    }
});

- Robert McKee

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));
            }
        });
    });

- Rodrigo Bueno

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/ 只是想知道为什么在处理更大的十进制数时会失败。

- r-d-r-b-3