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

Posted 2023-05-08

【中文标题】jQuery动画十进制数递增/递减

【英文标题】：jQuery animate decimal number increment/decrement

【发布时间】：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 设置动画，则无法以这种方式完成。必须有动画两个部分，整数和小数。除了整数和小数的分开动画之外，它可以用更简单的方式制作吗？

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