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

it is working with small numbers like from 0 to 100 but when it comes to large number like in the mentioned code, it is not giving the target number, it is animating to numbers like 1099933 or 1099610 or ..... and every time it changes.

那么我怎样才能让它与我指定的数字动画相匹配呢?

Answer 1

我也有相同的问题。推理依据是因为 animate 函数使用基于时间的数学公式。您在动画某个基于 css 的 cs 时不会真正注意到这一点, 因为像素中足够近的 cs 足够好。它会接近最终值, 但可能并不总是完全是最终值。解决方案是使用 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

(1) Javascript 是一个单一的线条应用程序。超时和动画只能根据理想的堆叠顺序将事件推向堆栈的尽头。长长的脚本部分可以导致该事件的实际发射时间大大超过您所要寻找的准确度。

2) 动画大概等于增量的多少,而决议在数量上则非常不准确。

3⁄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 3

动画不是“坚固”设计成“/坚固”以增量计数作为文字(尽管它可能因意外而起作用,随着任何新的 jQuery 版本而改变),它“坚固”设计成“/坚固”以动画一个或多个 CSS 属性。您应该使用设置“Interval ” 代替。

http://jsfididle.net/jbabey/mKa5r/

var num = 0;

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

    if (num === 100) {
        clearInterval(interval);            
    }
}, 100);

Answer 4

在此选择一个不使用 . animate () 的解决方案。

DEMO: http://jsfidd.net/czbAy/4//a >

这只是一条线性修改;如果这是你所追求的,你得不到宽松选项。

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-animateNations

友情链接