¿por qué jquery no puede animar el número con precisión?

Question

Estoy tratando de utilizar el siguiente código para incrementar el número en un cuadro de texto

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

que está trabajando con un pequeño número igual de 0 a 100 pero cuando se trata de la gran cantidad como en el código mencionado, se no está dando el número de destino, está animando a números como 1099933 o 1099610 o ..... y cada vez que cambia.

Entonces, ¿cómo puedo hacerlo para animar al número que especifico?

Answer 1

Tengo el mismo problema. El razonamiento se debe a que la función animate usa una fórmula matemática basada en el tiempo. Realmente no se da cuenta de esto cuando se anima algo basado en CSS porque lo suficientemente cerca en píxeles es lo suficientemente bueno. Se acercará al valor final, pero puede no ser siempre el valor final. La solución es usar el evento complete para establecer ese último valor.

Esto es lo que hay que hacer:

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

Animar no es diseñada a incrementar un contador como texto (aunque puede funcionar por accidente, lo que podría cambiar con cualquier nueva versión de jQuery), es diseñado para animar una o más propiedades de CSS. Deberías usar setInterval en su lugar.

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 es una sola aplicación roscada. Los tiempos de espera y las animaciones SÓLO empujan el evento hasta el final de la pila en función de un orden de apilamiento ideal. Una sección larga de secuencia de comandos puede hacer que el tiempo real de activación de ese evento supere la precisión que está buscando.

2) La animación aproxima cuánto aumentar, y en números más grandes esa resolución es muy inexacta.

3) jQuery solo tiene un búfer de animación. Es posible que se encuentre con problemas serios de representación si invoca más de un "contador" usando animación. Asegúrese de detener la animación anterior antes de realizar cualquier ajuste que la afecte.

4) Incluso con un tiempo de espera de 0, puede esperar el retraso del mundo real de ~ 15. Incluso si ese es el único "hilo" que tiene en ejecución.

Solución:

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

he aquí una solución que no utiliza .animate().

DEMO:http://jsfiddle.net/czbAy/4/

Es sólo una modificación lineal; no obtienes las opciones de relajación si eso es lo que estabas buscando.

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

Aquí es un plugin de jQuery para animar números de forma fiable, ut utiliza la devolución de llamada completa para establecer el número final correcta una vez que la animación ha terminado:

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