Question

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

找到Joss Crowcroft's solution表示效果不错的整数，我已经example on 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)); 
}
});

此处the Fiddle

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

jQuery动画十进制数增量/减量

3 个答案: