Contador de números animados jQuery de cero a valor

He creado una secuencia de comandos para animar un número de cero a su valor.

Trabajando

jQuery

$({ Counter: 0 }).animate({ Counter: $('.Single').text() }, { duration: 1000, easing: 'swing', step: function() { $('.Single').text(Math.ceil(this.Counter)); } }); 
  150 


No funciona

Ahora quiero ejecutar el script varias veces en la página para cada clase coincidente.

Debajo está lo que estoy intentando pero sin éxito hasta ahora:

HTML

 200 55 

JQUERY

 $('.Count').each(function () { jQuery({ Counter: 0 }).animate({ Counter: $(this).text() }, { duration: 1000, easing: 'swing', step: function () { $(this).text(Math.ceil(this.Counter)); } }); }); 

this no se refiere al elemento en la callback por pasos, sino que desea mantener una referencia al principio de su función (incluido en $this en mi ejemplo):

 $('.Count').each(function () { var $this = $(this); jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, { duration: 1000, easing: 'swing', step: function () { $this.text(Math.ceil(this.Counter)); } }); }); 

Actualización : si desea mostrar números decimales, en lugar de redondear el valor con Math.ceil , puede redondear hasta 2 decimales, por ejemplo, con value.toFixed(2) :

 step: function () { $this.text(this.Counter.toFixed(2)); } 

this dentro de la callback por pasos no es el elemento sino el objeto pasado a animar ()

 $('.Count').each(function (_, self) { jQuery({ Counter: 0 }).animate({ Counter: $(self).text() }, { duration: 1000, easing: 'swing', step: function () { $(self).text(Math.ceil(this.Counter)); } }); }); 

Otra forma de hacer esto y mantener las referencias a this sería

 $('.Count').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 1000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); }); 

VIOLÍN

IMPORTANTE : Parece una pequeña diferencia, pero realmente debería usar un atributo de datos para contener el número original para contar hasta. Alterar el número original puede tener consecuencias no deseadas. Por ejemplo, hago que esta animación se ejecute cada vez que un elemento ingresa a la pantalla. Pero si el elemento entra, sale y luego ingresa a la pantalla una segunda vez antes de que termine la primera animación, contará hasta el número equivocado.

HTML:

 

200

70

32

JQuery:

 $('.count').each(function () { $(this).prop('Counter', 0).animate({ Counter: $(this).data('value') }, { duration: 1000, easing: 'swing', step: function (now) { $(this).text(this.Counter.toFixed(2)); } }); }); 

Puedes obtener el elemento en .each() , prueba esto en lugar de usar this

 $('.Count').each(function (index, value) { jQuery({ Counter: 0 }).animate({ Counter: value.text() }, { duration: 1000, easing: 'swing', step: function () { value.text(Math.ceil(this.Counter)); } }); }); 

Lo que hace el código, es que el número 8000 está contando de 0 a 8000. El problema es que está ubicado en el medio de una página bastante larga, y una vez que el usuario se desplaza hacia abajo y ve realmente el número, la animación ya está lista. . Me gustaría activar el contador, una vez que aparece en la ventana gráfica.

JS:

 $('.count').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); }); 

Y HTML:

  8000 

Esto es trabajo para mí

 $('.Count').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); }); 

¡Esto es trabajo para mí!

   

Esto funcionó para mí

CÓDIGO HTML

 841 

Código jQuery

 $('.number-count').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } });