하나씩 계산하는 방법 - Jquery

Question

이 카운터를 하나씩 만들고 싶습니다. 예 : 카운트 1 카운트 종료 카운트 2가 카운트를 시작하면 카운트 2가 시작됩니다. 4 카운팅이 모두 끝나면 Count1에서 루프를 시작합니다.

$('.count').each(function anim() { 
 
$(this).prop('Counter',0).animate({ 
 
    Counter: $(this).text() 
 
}, { 
 
    duration: 2000, 
 
    easing: 'swing', 
 
    step: function (now) { 
 
     $(this).text(Math.ceil(now)); 
 
    }, 
 
    complete: function(){ 
 
     $(this).css('counter',0); 
 
     setTimeout(anim.bind(this),5000); 
 
    } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="counter inner"> 
 
     <ul> 
 
      <!--Count1--> 
 
      <li> 
 
       <h5 class="count count1">35</h5> 
 
       <p>Years</p> 
 
      </li> 
 
      <!--Count2--> 
 
      <li> 
 
       <h5 class="count count2">150</h5> 
 
       <p>Employees</p> 
 
      </li> 
 
      <!--Count3--> 
 
      <li> 
 
       <h5 class="count count3">15</h5> 
 
       <p>Branches</p> 
 
      </li> 
 
      <!--Count4--> 
 
      <li> 
 
       <h5 class="count count4">1500</h5> 
 
       <p>Clients</p> 
 
      </li> 
 
     </ul> 
 
    </div>

Answer 1

$('.count').eq(0).each(anim); 
 

 
function anim() { 
 
    $(this).prop('Counter', 0).animate({ 
 
    Counter: $(this).text() 
 
    }, { 
 
    duration: 2000, 
 
    easing: 'swing', 
 
    step: function(now) { 
 
     $(this).text(Math.ceil(now)); 
 
    }, 
 
    complete: function() { 
 
     if($(this).parent().next().prop("tagName") == "LI"){ 
 
     $(this).parent().next().find(".count").each(anim); 
 
     } 
 
     else{ 
 
     $('.count').eq(0).each(anim); 
 
     } 
 
    } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="counter inner"> 
 
    <ul> 
 
    <!--Count1--> 
 
    <li> 
 
     <h5 class="count count1">35</h5> 
 
     <p>Years</p> 
 
    </li> 
 
    <!--Count2--> 
 
    <li> 
 
     <h5 class="count count2">150</h5> 
 
     <p>Employees</p> 
 
    </li> 
 
    <!--Count3--> 
 
    <li> 
 
     <h5 class="count count3">15</h5> 
 
     <p>Branches</p> 
 
    </li> 
 
    <!--Count4--> 
 
    <li> 
 
     <h5 class="count count4">1500</h5> 
 
     <p>Clients</p> 
 
    </li> 
 
    </ul> 
 
</div>

트리거는 complete 함수 다음 트리거, 제 count 요소 anim 기능.