アニメートでインクリメントの数を増やす

Question

ページ上の要素内の数字を増やそうとしています。しかし、コンマを含めるには数字が必要ですが、増分は1秒あたり1桁しか増加しません。

私は、コードの作業を持っているが、私はちょっとだけ毎秒1桁増加刻みに設定して場所がわからないこだわっ（例：その後、10,100,041など10,100,040を）

<script></script> 
<div id="el"></div> 

// Animate the element's value from x to y: 
$({ 
    someValue: 40 
}).animate({ 
    someValue: 45000000 
}, { 
    duration: 3000, 
    easing: 'swing', // can be anything 
    step: function() { // called on every step 
     // Update the element's text with rounded-up value: 
     $('#el').text(commaSeparateNumber(Math.round(this.someValue))); 
    }, 
    complete: function(){ 
     $('#el').text(commaSeparateNumber(Math.round(this.someValue))); 
    } 
}); 

function commaSeparateNumber(val){ 
    while (/(\d+)(\d{3})/.test(val.toString())){ 
     val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
    } 
    return "$" + val; 
} 

Answer 1

アンDOMを修正するためのjQueryのanimate()メソッドの代わりに、これを達成するための間隔がずっと適切です。これを試してください：あなたは、オブジェクトをアニメーション化しようとしている

var start = 40, end = 45000000; 
 
var interval = setInterval(function() { 
 
    var $el = $('#el'); 
 
    var val = $el.data('value') || 40; 
 
    $el.text(commaSeparateNumber(++val)).data('value', val) 
 
    
 
    if (val >= end) 
 
     clearInterval(interval); 
 
}, 1000); 
 

 
function commaSeparateNumber(val) { 
 
    while (/(\d+)(\d{3})/.test(val.toString())) { 
 
    val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
 
    } 
 
    return "$" + val; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="el">$40</div>

Answer 2

...これは奇妙です。基本的にアニメーションメソッド（according to Spec）を使用してDOM要素のCSSスタイルをアニメーション化します。

は、それはそれは通常、使用方法は次のとおりです。

$('#el').animate({ top: '10px'}, 100, function() { /* on complete function */ }); 

あなたの仕事は、このような何かを行うことによって解決することができ

：

var value = 40; 
var end = 45000000; 

var interval = setInterval(function() { 
    value++; 
    $('#el').text(commaSeparateNumber(value)); 

    if (value >= end) { 
     clearInterval(interval); 
    } 
}, 1000);