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

1) Javascript is a single threaded application. Timeouts and animations ONLY push the event to the end of the stack based on an ideal stacking order. A long running section of script can cause the actual firing time of that event well past the accuracy you are looking for.

2) Animation approximates how much to increment, and on larger numbers that resolution is very inaccurate.

3) jQuery only has one animation buffer. You might run into some serious rendering issues if you invoke more than one "counter" using animation. Make sure to stop the previous animation before making any adjustments that effect it.

4) Even with a timeout of 0, you can expect the real world delay of ~15. Even if that is the only "thread" you have running.

Solution:

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 に答える
3

Animate は、カウンターをテキストとしてインクリメントするようには設計されていません(ただし、偶然に機能する可能性があり、jQuery の新しいバージョンでは変更される可能性があります) 。1 つ以上の 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 に答える
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 に答える