向上计数到数字，然后从那里计数到不同的数字(以不同的速度)

Question

是否可以将一个数字向上计数到某个点，然后一旦达到该数字，就可以使用Jquery从该点向上计数至另一个数字？

从本质上讲，我想很快到达第一个数字，然后以慢得多的速度动画到第二个数字。

我不能很顺利地切换到第二个数字。它会立即跳到最后一个数字。我哪里错了？

$({ 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>

Answer 1

不使用replaceWith而使用.text-replace with去掉元素并将其替换为数字，text将数字放入元素中

const $div = $('.Single');
$div.animate({
Counter: $div.text()
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$div.text(Math.ceil(now));
},
complete: function() {
checker();
}
});

function checker() {
base = parseInt($div.text());
per_day = 24;
newtarget = (base + per_day);
$div.text(newtarget);                 // change this line
$({ Counter: base }).animate({
Counter: $div.text()
}, {
duration: 3000,
easing: 'swing',
step: function() {
$div.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>

Answer 2

aww有人打了我一拳。。。很好地包装它有帮助：

$({
countNum: 0
}).animate({
countNum: $('.Single').text()
}, {
duration: 10000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.countNum));
},
complete: function() {
checker();
}
});
function checker() {
base = parseInt($(".Single").text());
per_day = 24;
newtarget = (base + per_day);
$({
countNum: per_day
}).animate({
countNum: newtarget
}, {
duration: 30000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.countNum));
},
complete: function() {
console.log('complete')
}
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">24</span>