jquery UI - animateNumber , stop()

필요한 js 파일

• animateNumber() - 특정 숫자를 목표치까지 카운트 시키는 ( 증가 혹은 감소 ) 메서드
• 속성값
• .prop ( "number"  , 시작할 숫자 )
• .animate( 
• number : 종료할 숫자
• color : 종료치에 다가갈수록 변화 할 색깔
• "font-size" : 종료치에 다가갈수록 변화 할 font size
• numberStep : function ( new , tween ){
•  now - 현재 표시되고 있는 숫자 (소숫점 굉장히 김 )..
•  $(tweeon.elem) 이벤트중인 엘레멘트 객체

• stop()
• jquery 메서스
• 이벤트중인 대상의 이벤트를 바로 중지

• 소스

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

//숫자 올라가고 내려가는 카운트 펑션 function numberUp(obj,endNumber){          //색생값의 변화를 주기위해 변수     $color="";     //시작번호 끝번호를 변수로 설정     $startNumber = $(obj).text();     $endNumber=endNumber;          //5000보다 작은수일경우 붉은색 아닐경우 검정색으로 표시     if($endNumber < 5000){         $color="red";     }else{         $color="black";     }          //animateNumber() 시작     $(obj)         //시작값을 $startNumber로 세팅         .prop ('number', $startNumber )         .animateNumber({             //종료값을 $endNumber로 세팅             number: $endNumber,             //색상 세팅             color:$color,             numberStep:function(now,tween){                 //텍스트를 현재숫자 -  now로                 $(tween.elem).text(Math.round(now));             }         },1000) } //중복으로 실행했을경우 에니메이션을 즉시 중지하고  //해당값으로 바로 오브젝트내용을 세팅해준뒤 바로 다음 실행 function immediatelyComplete(obj){     $(obj).stop();     $(obj).text($endNumber); } $(document).ready(function(){          //초기 값 세팅     $result=$("#result");     $endNumber=$("#result").text();              $("h2").click(function(){             immediatelyComplete($("#result"));             numberUp($result,parseInt($result.text())-1000);         })         $("h3").click(function(){             immediatelyComplete($("#result"));             numberUp($result,parseInt($result.text())+1000);         }) })     Colored by Color Scripter

cs