javascript - 每次在 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>

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

标签： javascriptjqueryhtml

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() 的文档