Contador de números animados jQuery de cero a valor

Solución:

Tu thisno se refiere al elemento en la devolución de llamada del paso, en su lugar, 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 es el elemento sino el objeto pasado a animate ()

$('.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 mantener el número original para contar. La alteración del 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 entra en la pantalla por segunda vez antes de que finalice la primera animación, contará hasta el número incorrecto.

HTML:

<p class="count" data-value="200" >200</p>
<p class="count" data-value="70" >70</p>
<p class="count" data-value="32" >32</p>

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

---

---

Utiliza Nuestro Buscador