jQuery/DOM&jQuery

jQuery animate() 애니메이션 메소드

샷타이거 2009. 10. 29. 16:55

jQuery animate() 애니메이션 메소드

앞서본 보여준 애니메이션메소드가 있었다. jQuery hide, show ,fade 애니메이션 메소드

animate()는 간단하기도 하고 때로는 사용자정의에 따라 다양하게 이용될수 있다.사용법부터 보자.

animate()는 4개의 인자를 가진다.

  • .css()와 비슷한 속성값
  • 속도, 역시 1/1000초 단위
  • 외부 플러그인(pulg-in)효과주기
  • 콜백함수

이 네가지에서 속성값은 필수 이고 나머지는 지정안해도 무방하다. 예제를 보자.

$('#box').animate({ 'width':'500px',opacity:0.4});

위의 예제는 #box라는 아이디에접근하고 가로길이를 500px 그리고 투명도를 0.4로 하게한다.이번엔 여기에 속도를 줘 보자

$('#box').animate({ 'width':'500px',opacity:0.4},200);

200이라고 속도를 주었다.200/1000초 빠르기로 애니메이션이 실행된다.하나더 자세한에제를 보겠다.원래주어진 사각형을 클릭시 크기변환시키는 애니메이션이다.

여기가 클릭 버튼




어쩌고 저쩌고

css에서 박스 크기를 지정해주었다 색은 #ff

#box{ width:300px; height:200px; background:#fcc;}

이제 클릭시 크기가 변환하도록 하면된다.

$(document).ready(function(){
 		 $('p a').click(function(){
         //엘리먼트 p a에 접근,그리고 클릭시 이벤트 발생 			    
			$('#box').animate(
              {'width':'500px','height':'300px',opacity:0.4},1000
                            );
            //발생하는이벤트.#box 아이디의 엘리먼트의 속성
            //가로가 500px 세로는 300px로 늘어나고 투명도는 0.4
            // 그리고 1초의속도로 애니메이션이전개된다.		   
           });
		});

이벤트 순차적 효과

앞서본예제대로 하면 css에서 정해준 크기의 분홍색사각형이 가로세로 동시에 늘어나면서 효과가 적용될것이다. 그러면 예로 가로먼저 늘어나고 세로 늘어나도록 여러효과를 순차적으로 일어나게할려면 어떻게 해야하는지 알아보자.

$('#boxSec').animate({ 'width':'500px',opacity:0.4},1000)
			.animate({'height':'300px'},1000);

위의 예제는 첫번째애니메이션 가로로늘어나는 것이 먼저 실행되고 그리고 두번째 애니메이션 세로로 늘어나게 된다.이런 순차적이것은 애니메이션메소드에서 어디든지 적용된다.

또다른 .animate() 정의 그리고 queue

첫번째에서 설명한것말고도 도다른 .animate정의법이있다.

$('#box').animate({'width':'500px',opacity:0.4},{duration:1000,pulg-in,queue:false});

위같은 경우는 {효과},{duration(속도),플러그인,queue}부분류로 기본과 옵션을 나누어 준모습이다.주요시 여길점은 queue이다.

일반적으로 여러 애니메이션을 적용하면 순차적으로 일어난다.하지만.animate()에서 queue의값을 false로 할경우 동시에 일어나게된다.예제소스를 보자 .animate메소드를 순차적으로 썼지만 queue:false로 동시에 일어나게 된다

$('p#buttonThr a').click(function(){
				$('#boxThr').animate({ 'width':'200px',opacity:0.4},1000)
				.animate({'height':'100px'},{duration:1000,queue:false});		   
           });

세가지에대해서 설명했다 요약하자면

  • 일반적인 .animate()메소드 사용방법
  • 순차적 사용방법
  • queue:false를 이용한 동시간대 효과

각각예제는 여기서 볼수있다.http://sianasiatiger.cafe24.com/study/J_animate.html

저작자표시