jQuery计数器，达到数字后倒计时答案

【问题标题】：jQuery counter, counting down after reaching the numberjQuery计数器，达到数字后倒计时
【发布时间】：2021-09-04 21:55:52
【问题描述】：

我正在使用 jQuery 代码为我的网页显示动画统计信息。

数字动画成功，但在达到最大值几秒钟后，它开始倒计时回到 1！我该如何解决这个问题？

// Checks if any particular element is in viewport
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementTop < viewportBottom;
};

// Animate numbers when scrolled into view
$(window).scroll(function() {
  var counters_triggered = false;
  var $counter_animated = $('.stat-counters > .stat > .counter > span');

  if ($('.stat-counters').isInViewport() && !counters_triggered) {
    counters_triggered = true;

    $.each($counter_animated, function() {
      var $counter = $(this);
      $counter.prop('Counter', 0).animate({
        Counter: $counter.text()
      }, {
        duration: 5000,
        easing: 'swing',
        step: function(now) {
          $counter.text(Math.ceil(now));
        }
      });
    });
  }
});

.padding { height: 1000px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Scroll down...
<div class="padding"></div>
<div class="stat-counters d-flex justify-content-between align-items-start">
  <div class="stat col-md-4 px-0">
    <div class="counter">
      <span>10</span>+
    </div>
    <span class="text">Years of Experience</span>
  </div>
</div>

【问题讨论】：

请让代码可以运行，谢谢

标签： jquery counter

【解决方案1】：

问题是因为您防止动画在滚动时多次触发的逻辑不太正确，实际上是多次排队事件处理程序。

您的isInViewport() 函数需要在每个单独的元素上调用，而不是在集合上。因此if 条件应该在$.each() 内。

此外，您使用单个变量来管理所有可动画元素的状态。您可以通过对它们单独使用data 属性来单独管理它们的状态。

话虽如此，试试这个：

// Checks if any particular element is in viewport
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementTop < viewportBottom;
};

// Animate numbers when scrolled into view
$(window).scroll(function() {
  $('.stat-counters > .stat > .counter > span').each((i, el) => {
    var $counter = $(el);
    if (!$counter.isInViewport() || $counter.data('animation-started'))
      return;

    $counter.data('animation-started', true).prop('Counter', 0).animate({
      Counter: $counter.text()
    }, {
      duration: 5000,
      easing: 'swing',
      step: function(now) {
        $counter.text(Math.ceil(now));
      }
    });
  });
});

.padding {
  height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Scroll down...
<div class="padding"></div>
<div class="stat-counters d-flex justify-content-between align-items-start">
  <div class="stat col-md-4 px-0">
    <div class="counter">
      <span>10</span>+
    </div>
    <span class="text">Years of Experience</span>
  </div>
</div>

【讨论】：