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

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>