jQuery / JS逐个滚动编号

jQuery / JS rolling numbers one by one

本文关键字：滚动 编号 JS jQuery      更新时间：2023-09-26

我有一个函数，它触发数字滚动从0到x。我也使它只在鼠标悬停在特定div上时启动。所有工作正常。

然而，我希望每个数字一个接一个地单独滚动。

first, next, next, next等

我如何将它实现到这段代码

   $( ".skaic" ).one( "click mouseover", function() {
      $('.Count').each(function () {
          $(this).prop('Counter',0).animate({
              Counter: $(this).text()
          }, {
              duration: 3000,
              easing: 'swing',
              step: function (now) {
                  $(this).text(Math.ceil(now));
              }
          });
      });
    });

标记:

<div class="skaic">
    <span class="Count">5</span>
    <span class="Count">2</span>
    <span class="Count">12</span>
</div>

可以在循环中添加延迟

$(".skaic").one("click mouseover", function() {
    $('.Count').each(function(i) {
        $(this).prop('Counter', 0).delay(i*3000).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function(now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
});
.Count {
    display: block;
    font-size : 30px;
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skaic">
    <span class="Count">5</span>
    <span class="Count">2</span>
    <span class="Count">12</span>
</div>

相关文章：