jQuery/JS число оборотов один за другим

Question

У меня есть функция, которая запускает числа, которые нужно перевернуть с 0 на X. Я также запустил его, только когда i mouseover на определенном 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)); 
       } 
      }); 
     }); 
    }); 

Markup:

<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>