8

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

    // 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 或.....等数字设置动画，并且每次它改变。

那么我怎样才能让它动画到我指定的数字呢？

4

5 回答 5

17

我有同样的问题。推理是因为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>

于 2012-05-25T17:26:59.153 回答
3

Animate 并非旨在将计数器作为文本递增（尽管它可能会意外工作，这可能会随任何新版本的 jQuery 发生变化），它旨在为一个或多个 CSS 属性设置动画。您应该改用 setInterval 。

http://jsfiddle.net/jbabey/mKa5r/

var num = 0;

var interval = setInterval(function () {
    document.getElementById('result').innerHTML = num;
    num++;

    if (num === 100) {
        clearInterval(interval);            
    }
}, 100);​
于 2012-05-25T17:28:46.847 回答
3

1) Javascript 是单线程应用程序。超时和动画仅根据理想的堆叠顺序将事件推送到堆栈的末尾。长时间运行的脚本部分可能会导致该事件的实际触发时间远远超过您正在寻找的准确性。

2）动画近似于增加多少，并且在较大的数字上，分辨率非常不准确。

3) jQuery 只有一个动画缓冲区。如果您使用动画调用多个“计数器”，您可能会遇到一些严重的渲染问题。确保在进行任何影响它的调整之前停止上一个动画。

4) 即使超时时间为 0，您也可以预期现实世界的延迟约为 15。即使那是您正在运行的唯一“线程”。

解决方案：

take a snapshot of the DTG
set your interval to something within the human experience, say ~200
on each interval, check how much time has passed from the original DTG
set your text field to that delta number.
stop the interval with the original DTG + "your target number" > the new DTG
于 2012-05-25T17:48:01.270 回答
2

这是一个不使用的解决方案.animate()。

演示：http: //jsfiddle.net/czbAy/4/

这只是一个线性修改；如果那是你所追求的，你就不会得到缓和选项。

var counterx = $('#counterx'), // cache the DOM selection! :)
    i = 0,
    n = 1100000,
    dur = 1000, // 1 second
    int = 13,
    s = Math.round(n / (dur / int));

var id = setInterval(function() {
    counterx.text(i += s);
    if (i >= n) {
        clearInterval(id);
        counterx.text(n);
    }
}, int);
于 2012-05-25T18:07:25.267 回答
0

这是一个可靠地为数字设置动画的 jquery 插件，一旦动画完成，ut 使用完整的回调来设置正确的最终数字：

https://github.com/kajic/jquery-animateNumber

于 2013-01-09T08:59:59.747 回答