jQuery在Anchor标记悬停时从零到值的动画数字计数器

Question

$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
}
});

数字

我需要一个jQuery动画数字计数器，在锚点标记部分悬停时从零到值，这可能吗

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

Answer 1

这样？

function startCounter() {
const maxCounter = $('.Single').data('counter');
$({
Counter: 0
}).animate({
Counter: maxCounter
}, {
duration: 1000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
}
});
}
$('#magic').on('mouseenter', startCounter);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single" data-counter="250"></span><br/>
<a id="magic" href="#">Hover me</a>