Is it possible to count up a number to a certain point, then once it hits that number, count from there up to a different number using Jquery?
Essentially I want to get to the first number quite quickly, then want to animate to the second number at a much slower pace.
I can’t quite get it to switch smoothly to the second number. It just instantly jumps to the very final number. Where am I going wrong?
$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
},
complete: function() {
checker();
}
});
function checker() {
base = parseInt($(".Single").text());
per_day = 24;
newtarget = (base + per_day);
$(".Single").replaceWith(newtarget);
$({ Counter: base }).animate({
Counter: $('.Single').text()
}, {
duration: 3000,
easing: 'swing',
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">24</span>>Solution :
Instead of replaceWith use .text – replace with gets rid of your element and replaces it with the number, text will put the number inside the element
$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
},
complete: function() {
checker();
}
});
function checker() {
base = parseInt($(".Single").text());
per_day = 24;
newtarget = (base + per_day);
$(".Single").text(newtarget); // change this line
$({ Counter: base }).animate({
Counter: $('.Single').text()
}, {
duration: 3000,
easing: 'swing',
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">24</span>