I have the following code that is two counters, one counts to 30000 then then next counts from there up to a higher number at a different speed.
The problem I have is that the first counter never actually gets to 30000 before the second counter kicks off. I thought that was the whole point of the complete parameter but it's actually just running for 1 second then starting the next counter. But I need it to count up that quickly so I can't change the duration.
How can I make sure the second counter starts only when the first counter has hit 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>Your issue is that step: does not include the "last step".
If you count 1..2..3, it looks like it's 2 steps (starting at 1), but in animation terms, it's actually 1 step (1->2) then finishes with done: (2->3).
Update the UI with counter in the done: callback and it works fine (though the 20000 counter may appear to start too soon, so you may want a setTimeout on 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>