[JQuery] 숫자 0부터 특정수까지 증가하는 애니메이션 넣기

■ JQuery 숫자 0부터 특정수까지 증가하는 애니메이션 넣기

예를 들어 특정 수 100 이라는 숫자를 나타낼 때
0부터 100까지 숫자가 올라가는 모션을 넣어주고 싶을 때 사용
(따로 라이브러리 js 필요없음)

---

■ 사용법

<span class="target_cnt"></span>

<script type="text/javascript">
    // $({ val : 시작숫자 }).animate({ val : 종료숫자 }, {
    $({ val : 0 }).animate({ val : 100 }, {
        duration: 1500,
        step: function() {
            var num = numberWithCommas(Math.floor(this.val));
            $(".target_cnt").text(num);
        },
        complete: function() {
            var num = numberWithCommas(Math.floor(this.val));
            $(".target_cnt").text(num);
        }
    });

    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
</script>

---

■ 참고

소수점까지 나타내고 싶다면 toFixed() 사용하여 나타내고 싶은 자리수까지 나타낼 수 있음

var num = numberWithCommas(this.val.toFixed(1));