javascript - jQuery/JS 滚动数字一个一个

Question

我有一个函数可以触发数字从 0 滚动到 X。我还让它仅在我将鼠标悬停在特定的 DIV 上时启动。一切正常。

但是我希望每个数字一个接一个地滚动。

第一个，下一个，下一个，下一个等等

我如何在这段代码中实现它

   $( ".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>

Answer 1

你可以在循环中添加一个延迟

$(".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>