jQuery/JSローリング番号を1つずつ

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>