每次在div上滚动时执行jQuery函数

我有一个问题与一个重复动画,我需要插入网页。我用动画在网页上显示一个数列。每次我将鼠标悬停在部分上时,只需要调用这个动画函数,但是下面的代码的行为方式很奇怪。动画第一次正确执行,但在动画结束后执行某种回滚,以相反的方式执行动画,返回值1。
我使用的代码报告如下:

$("#numberFarm").hover(function() {
  $('.countIncrement .count').each(function() {
    $(this).prop('Counter', 0).animate({
      Counter: $(this).text()
    }, {
      duration: 3000,
      easing: 'swing',
      step: function(now) {
        $(this).text(Math.ceil(now));
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="numberFarm">
  <div class="container">
    <h2>i nostri numeri</h2>
    <div class="row">
      <div class="col-xs-4">
        <div class="box_icon"><img src="/assets/images/transport_icon.png" /></div>
        <div class="divCountIncrement">
          <h4 class="countIncrement"><span class="count">38</span> <br/><span class="numberDesc">veicoli</h4></div></div>
                <div class="col-xs-4"> <div class="box_icon"><img src="/assets/images/persons_icon.png" /></div> <div class="divCountIncrement"><h4 class="countIncrement"><span class="count">43</span> <br/><span class="numberDesc">staff</span></h4>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box_icon"><img src="/assets/images/kilo_icon.png" /></div>
        <div class="divCountIncrement">
          <h4 class="countIncrement"><span class="count">2</span> <br/><span class="numberDesc">milioni di km percorsi</span></h4>
        </div>
      </div>
    </div>
  </div>
</section>

你对这种奇怪的行为有什么解释吗?

每次在div上滚动时执行jQuery函数

例子: