Выполнять функцию jQuery каждый раз при прокрутке

Question

У меня проблема с повторяющейся анимацией, которую нужно вставить на веб-страницу. Я использую анимацию, чтобы показать прогрессию числа на веб-странице. Мне нужно просто вызывать эту функцию анимации каждый раз, когда я go наводю указатель мыши на раздел, но код ниже ведет себя странным образом. Анимация выполняется правильно в первый раз, но после завершения анимации она выполняет своего рода откат, выполняя анимацию противоположным образом, возвращая значение 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 ()