首页 > 解决方案 > 稍微延迟启动计数器

问题描述

当我重新加载我的网站时,一个计数器正在运行。我想稍微延迟一下,就像用户打开网站并向下滚动然后计数器开始运行时一样。

$('.counter, .counterplus').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({
    countNum: $this.text()
  }).animate({
    countNum: countTo
  }, {
    duration: 2000,
    easing: 'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="count">
  <div class="allcount">
    <div class="counter" data-count="100">0</div>
    <p>Customer support</p>
  </div>
  <div class="allcount">
    <div class="counterplus" data-count="115">0</div>
    <p>Happy Customers</p>
  </div>
  <div class="allcount">
    <div class="counter" data-count="100">0</div>
    <p>Client Satisfaction</p>
  </div>
</div>

标签: javascriptjqueryhtmlcss

解决方案


推荐阅读