Javascript
[jQuery] .animate() 로 숫자 카운팅 구현하기
- 2024.10.11 17:04:35
 숫자 0부터 숫자가 커지는 카운팅 효과를 구현해본다. [!]구현된 결과 화면 예시[/!]  [!]HTML[/!] 카운팅될 엘리먼트를 추가한다. <ul>
<li> <div class="no">+<strong>1300</strong></div> <p>일반 참가자</p> </li> <li> <div class="no">+<strong>520</strong></div> <p>참가기업</p> </li> <li> <div class="no">+<strong>230</strong></div> <p>비즈매칭 참가기업</p> </li> <li> <div class="no">+<strong>220</strong></div> <p>비즈매칭 수</p> </li> <li> <div class="no">+<strong>80</strong></div> <p>전시 참가 기업</p> </li> <li> <div class="no">+<strong>30</strong></div> <p>IR 참가 기업</p> </li> </ul> [!]jQuery[/!] 아래와 같이 코드를 적용한다. 해당 객체에 Counter atteibute를 추가하여 값을 0으로 설정한 뒤 animate로 증가시키는 방법이다. $(this).prop('Counter', 0).animate({
Counter: $(this).text()}, { duration: 3000, easing: 'swing', step: function (now){ // $(this).text(Math.ceil(now)); // 콤마 없는 숫자 노출 원하는 경우 $(this).text(Math.ceil(now).toLocaleString()); // 콤마 처리된 숫자 노출 원하는 경우 } }); |