递增/递减数字jQuery

时间:2013-08-12 21:12:03

标签: jquery

我从Joss Crowcroft's solution找到了此代码,可能与此问题类似jquery-animate-decimal-number-increment-decrement TS已在jsfiddle example

上做了示例
jQuery({someValue: 0}).animate({someValue: 110}, {
duration: 1000,
easing:'swing', // can be anything
step: function() { // called on every step
    // Update the element's text with rounded-up value:
    $('#el').text(Math.ceil(this.someValue) + "%");
}});

但是我的问题是不同的,当我将某个值110更改为1000000或数百万这样的大数字时。动画数字的结尾将不再像someValue那样精确,有时它最终可能会在999876或1000000以下等等。我怎么能让它像endValue一样结束动画数字呢?

1 个答案:

答案 0 :(得分:1)

您可以提供完成功能,该功能将在动画结束时调用,就像 Orbling 建议一样:

$({numberValue: currentNumber}).animate({numberValue: 1000000}, {
    duration: 8000,
    easing: 'linear',
    step: function () { 
        $('#dynamic-number').text(Math.ceil(this.numberValue)); 
    },
    done: function () {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

工作小提琴:http://jsfiddle.net/WZC4F/