jQuery使十进制数增加/减少动画 [英] jQuery animate decimal number increment/decrement

问题描述

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

I would like to animate difference between two decimal numbers step by step.

找到 Joss Crowcroft的解决方案对整数的工作不错，我做了 example on jsfiddle 。
程式码片段：

Have found Joss Crowcroft's solution for integer numbers that works nice and I've made example on jsfiddle. Code snippet:

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

但是如果我想动画例如2.85到3.25， 。必须有动画的两部分，整数和小数。

But if I want to animate for example number 2.85 to 3.25, can't be done on ths way. There have to be animated both parts, integer and decimal. Can it be made on simplier way except separated animations for integers and decimals?

推荐答案

这是什么意思？

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

这篇关于jQuery使十进制数增加/减少动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！