javascript - 为什么 jquery 不能准确地为数字设置动画？

Question

我正在尝试使用以下代码来增加文本框中的数字

    // Animate the element's value from 0 to 1100000:
$({someValue: 0}).animate({someValue: 1100000}, {
    duration: 1000,
    step: function() { // called on every step
        // Update the element's text with value:
        $('#counterx').text(Math.floor(this.someValue+1));
    }
});

它正在处理从 0 到 100 之类的小数字但是当涉及到像上面提到的代码中的大数字时，它没有给出目标数字，它正在对数字进行动画处理，例如 1099933 或 1099610 或 .....每次它都会改变。

那么我怎样才能让它根据我指定的数字进行动画处理呢？

Answer 1

我也有同样的问题。原因是 animate 函数使用了基于时间的数学公式。在为基于 CSS 的东西设置动画时，您不会真正注意到这一点，因为像素足够接近就足够了。它会接近最终值，但可能并不总是恰好是最终值。解决方案是使用 complete 事件来设置最后一个值。

这是你需要做的:

function animateNumber(ele,no,stepTime){
$({someValue: 0}).animate({someValue: no}, {
        duration: stepTime,
        step: function() { // called on every step. Update the element's text with value:
            ele.text(Math.floor(this.someValue+1));
        },
        complete : function(){
            ele.text(no);
        }
});
}

animateNumber($('#counterx'),100,10000);
animateNumber($('#countery'),100,1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
counterx(slow): <span id=counterx>--</span>
<br/>
countery(fast): <span id=countery>--</span>