[jQuery]animate 예제 및 사용법 입니다.

jQuery animate() 를 사용해볼까요?

이 함수는 css 속성들을 이용하여 사용자 애니메이션을 수행 하는 것 입니다.

대신 비수치형 속성값들로는 애니메이션 효과를 줄 수 없습니다. 예를 들어 width,height,left 와 같은 수치형은 제어가 가능하고, background-color 와 같은 것은 사용이 불가능 합니다.

 

스타일 속성 뿐만 아니라, 비 스타일 속성들(scrollTop, scrollLeft, 그리고 사용자 정의 속성 같은) 들도 애니메이션 효과에 사용할 수 있습니다.

수치는 픽셀단위로 제어 할 수 있고 , em과 %같은 값들도 지원 합니다. 그리고 더불어 'show', 'hide', 'toggle'과 같은 문자열도 사용할 수 있습니다.

 

.animate( properties [, duration] [, easing] [, complete] )

---

 

properties 움직임을 만들어 낼수 있는 CSS 속성들

duration 움직임이 발생할 시간

easing 움직임에 변화를 줄 수 있는 함수

complete 움직임이 멈춘 후 실행될 함수

 

animate( properties, options )

---

 

properties 움직임을 만들어 낼수 있는 CSS 속성들

options A map of additional options to pass to the method. Supported keys:

duration: 움직임이 발생할 시간
easing: 움직임에 변화를 줄 수 있는 함수
complete: 움직임이 멈춘 후 실행될 함수
step: 움직임 각 스텝별로 실행될 함수
queue: 애니메이션 효과는 순서대로 발생합니다. 만약 false로 하면 동시에 같이 움직임이 일어납니다.
specialEasing: CSS 속성의 하나 이상을 특별한 효과로 처리합니다. (added 1.4).

 

예제) 간단하게 왼쪽,오른쪽 나오게 css 조절 하는 예제로 만들어봤습니다.

 

 

	
가로
	

		
	
	
	
	
세로
	

		
	
	
	
	
복합
	

		
	
	
	

설명 출처: http://www.jquerykorea.pe.kr