숫자 카운팅 모션 (정한 숫자와 시간에 맞게 올라가는 모션)

가끔 UI 작업을 하다보면 정해져있는 숫자만큼 0부터 숫자를 올리고 싶을 때가 있는데

이때를 위해 만들어둔 함수이다.

function numberCount(element, num, time) {
        var element = $(element),
                maxNumber = Number(num),
                startNumber = 0,
                spd = time;

        element.animate({val : maxNumber}, {
            duration: spd,
            step: function() {
                var currentNum = parseInt(this.val);
                element.text(currentNum);
            },
            complete : function() {
                var completeNum = parseInt(this.val);
                element.text(completeNum);
            }
        })    
    }

 

파마미터는 3가지를 받는데 아래와 같다.  

• element : 변경되어야할 위치
• num : 원하는 숫자 (목표 숫자)
• time : 정해진 시간 (얼마의 시간으로 목표 숫자로 도달하는지)

 

코드를 보면 알겠지만, jquery가 들어가야하는 코드이다.