Contador de números animado jQuery de cero a valor

Investigamos por distintos sitios para de esta manera traerte la respuesta para tu inquietud, en caso de alguna inquietud déjanos tu inquietud y contestaremos con gusto.

Solución:

Tu thisno hace referencia al elemento en la devolución de llamada del paso, sino que desea mantener una referencia a él al comienzo de su función (envuelto en $thisen 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));
    
  );
);

Actualizar: 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 devolución de llamada del paso no está 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 data attribute para mantener el número original para contar hasta. La alteración del número original puede tener consecuencias no deseadas. Por ejemplo, esta animación se ejecuta cada vez que un elemento ingresa a la pantalla. Pero si el elemento entra, sale y luego entra en la pantalla una segunda vez antes de que finalice 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));
        
    );
);

Sección de Reseñas y Valoraciones

Al final de la artículo puedes encontrar las anotaciones de otros administradores, tú igualmente tienes la habilidad mostrar el tuyo si te gusta.

---

---

Utiliza Nuestro Buscador