Question

我遇到一个问题，即jQuery的animate()函数没有完成动画我的数字计数动画。动画简单地应该从0到5000计数，但刷新时有时它会在4999结束，其他时间则在4989等。

它在80％的时间内正常工作，但20％的时间刷新页面时动画以不同的数字结束。我做错了什么？

http://jsbin.com/dobajepoti/2/（继续刷新页面以查看它）

Answer 1

不保证在每个中间值上调用step()函数，而是调用动画的每个步骤（可以通过超时或通过请求来定义next animation frame ）。因此，5,000的最终值并不总是构成动画步骤。

要确保确实如此，您可以将每步功能分配给done回调：

$(thing).animate({ // ... step: myStepFunction, done: myStepFunction });

E.g。 http://output.jsbin.com/fagicunuye

Answer 2

不用jQuery试试吧：

var count = 0;
var counter = setInterval(countUp, 1);
var output = document.querySelector("[data-value]");
var max = output.getAttribute("data-value");

function countUp() {
    count = count + 25;
    if (count > max) {
        clearInterval(counter);
        return;
    }
    output.innerHTML = count;
}

Answer 3

问题是你动画1000毫秒。根据cpu，它可能无法在那段时间内计算5000次。您可以将其设置为较长时间的动画，并在满足条件时使用stop()停止动画。

jQuery animate（）没有完成动画

3 个答案: