Tengo el siguiente código que son dos contadores, uno cuenta hasta 30000 y luego el siguiente cuenta desde allí hasta un número más alto a una velocidad diferente.
El problema que tengo es que el primer contador nunca llega a 30000 antes de que comience el segundo contador. Pensé que ese era el objetivo del parámetro completo, pero en realidad solo se ejecuta durante 1 segundo y luego comienza el siguiente contador. Pero necesito que cuente tan rápido para que no pueda cambiar la duración.
¿Cómo puedo asegurarme de que el segundo contador comience solo cuando el primer contador haya llegado a 30000?
$({ Counter: 0 }).animate({ Counter: $('.Single').text() }, { duration: 1000, easing: 'linear', step: function() { $('.Single').text(Math.ceil(this.Counter)); }, done: function() { checker(); } }); function checker() { base = parseInt($(".Single").text()); per_day = 18; newtarget = (base + per_day); $(".Single").text(newtarget); $({ Counter: base }).animate({ Counter: $('.Single').text() }, { duration: 20000, easing: 'linear', step: function() { $('.Single').text(Math.ceil(this.Counter)); }, }); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="Single">30000</span>Su problema es ese step: no incluye el "último paso".
Si cuenta 1..2..3, parece que son 2 pasos (comenzando en 1), pero en términos de animación, en realidad es 1 paso (1->2) y luego termina con done: (2->3).
Actualice la interfaz de usuario con el contador en el done: devolución de llamada y funciona bien (aunque puede parecer que el contador 20000 comienza demasiado pronto, por lo que es posible que desee un setTimeout en el checker() ).
$('.Single').text(Math.ceil(this.Counter)); $({ Counter: 0 }).animate({ Counter: $('.Single').text() }, { duration: 1000, easing: 'linear', step: function() { $('.Single').text(Math.ceil(this.Counter)); }, done: function() { $('.Single').text(Math.ceil(this.Counter)); checker(); } }); function checker() { base = parseInt($(".Single").text()); per_day = 18; newtarget = (base + per_day); $(".Single").text(newtarget); $({ Counter: base }).animate({ Counter: $('.Single').text() }, { duration: 20000, easing: 'linear', step: function() { $('.Single').text(Math.ceil(this.Counter)); }, }); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="Single">30000</span>