jQuery动画十进制数递增/递减答案

【问题标题】：jQuery animate decimal number increment/decrementjQuery动画十进制数递增/递减
【发布时间】：2013-05-10 13:33:02
【问题描述】：

我想逐步动画化两个十进制数之间的差异。

找到了Joss Crowcroft's solution 的整数，我已经找到了example on jsfiddle。代码sn-p：

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

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

【问题讨论】：

标签： jquery html css jquery-animate

【解决方案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); 
    }
});

【讨论】：

【解决方案2】：

试试这个

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

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

这里是the Fiddle

【讨论】：

【解决方案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));
            }
        });
    });

【讨论】：

【解决方案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/ 只是想知道为什么这会因更大的十进制数字而失败..

【讨论】：