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

Question

我有一个需要在网页中插入的循环动画的问题。 我使用动画在网页上显示数字进展。 每次我将鼠标悬停在该部分时，我只需要调用此动画函数，但下面的代码以一种奇怪的方式运行。 动画第一次正确执行，但在动画结束后它执行一种回滚，以相反的方式执行动画返回值 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>

你对这种奇怪的行为有什么解释吗？
如何解决此问题以防止恢复到原始状态？

Answer 1

因为$("#numberFarm").hover(function () {需要另一个function()

例子：

$( the-element ).hover(
  function() {
    //this is the `mouseenter`
  }, function() {
     //this is the `mouseleave`
  }
);

.hover() 方法绑定了 mouseenter 和 mouseleave 事件的处理程序。 您可以使用它在鼠标位于元素内时将行为简单地应用于元素。

调用$( selector ).hover( handlerIn, handlerOut )是以下的简写：

 $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

阅读.hover()的文档