숫자 애니메이션으로 표시하기

숫자 애니메이션으로 표시하는 예제입니다.

 

 

$(function(){
    var data1 = 0,
        data2 = 0,
        data3 = 0,
        numberResult = $('.numberResult'),
        numberInput = $('.numberInput'),
        numberButton = $('.numberButton');

    //버튼 클릭시
    numberButton.click(function(e){
        e.preventDefault();

        data1 = Number(data3);
        data2 = Number(numberInput.val());
        data3 = Number(data1) + Number(data2);
    
         //animate옵션을 활용 사용자 속성을 만들고, 속성이 바뀌는 것을 작성
        $({data:data1}).animate({data:data3},{
            duration:500,  //시간
            progress:function(){ //바뀌는 상황마다 실행
                numberResult.text(Math.ceil(this.data));
            }
        });

        numberInput.val("");   
    });
});

 

 

 

---

개인 공부용으로 만들었습니다.
다른 분들에게도 도움이 되었으면 좋겠습니다.
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.

숫자애니메이션.zip

0.00MB