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>

Answer 2

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

Answer 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

Answer 4

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

DEMO： 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);

Answer 5

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

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

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

5 个答案: