He usado el método jQuery prop con la propiedad counter para crear una animación que cuenta desde 0 hasta el valor de .count -string a través de each -loop.

Esto funciona según lo previsto, pero me gustaría aumentar este valor en 3, 2 y 1 respectivamente, establecido por las variables cowsIncrement , sheepIncrement y pigsIncrement . Cada incremento también tiene que ocurrir en intervalos de 3, 2 y 1 segundo (similar al valor del incremento), y tiene que ejecutarse infinitamente con la misma animación. ¿Cómo haría para hacer esto?

Cualquier solución vainilla JS/jQuery es bienvenida. ¡Gracias!

 // #count1 let cowsIncrement = 3; // #count2 let sheepIncrement = 2; // #count3 let pigsIncrement = 1; $('.count').each(function() { $(this).prop('Counter', 0).animate({ Counter: $(this).text() }, { duration: 1500, easing: 'swing', step: function(now) { $(this).text(Math.ceil(now).toLocaleString('de-DE')); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="count" id="count1">3000</div><span>cows</span> <div class="count" id="count2">2000</div><span>sheep</span> <div class="count" id="count3">1000</div><span>pigs</span>