Animation

From. jQuery Novice to Ninja : 제이쿼리 고수로 가는 첫걸음

1. CSS 속성을 이용한 애니메이션

animate를 사용하려면 움직임에 대한 내용이 키/값 싸으로 설정된 프로퍼티가 담긴 객체 문자열을 전달한다. css 함수에 여러 개의 프로퍼티를 설정할 때 사용한 밥법과 같다. 기억해야 할 내용이 하나 있다. 바로 animate 함수에서 사용할 프로퍼티의 이름은 카멜 표기법에 따라야 한다는 점이다. 즉 margin-left 대신 marginLeft, background-color 대신 backgroundColor를 사용해야 한다. 여러 단어로 이루어진 프로퍼티의 이름은 반드시 이런 방식으로 수정해야 한다.

** 추가 현재 버전에서는 따옴표를 사용하여 프로퍼티명(예를 들어 "margin-left")을 적시해도 애니메이션이 작동한다.

샘플 자료입니다.



2. 현재값의 상대값 적용하기

엘리먼트의 현재 값의 상대적인 값으로 지정할 수 있다. 값 앞에 '+=' 혹은 '-='를 지정하면 된다.



3. easing

http://jqueryui.com/에서 download jquery UI 아래 build custom download를 이용해서 jquery ui를 다운로드 한다.
색상변환, easing effect 등 관련 소스가 jquery ui에 통합되어 있다.
http://www.robertpenner.com/easing/easing_demo.html

jQuery UI를 import 하지 않고, jquery core에 내장되어 있는 easing 효과는 linear 와 swing 뿐이다.
jQuery에서 easing 파라미터가 지저되어 있지 않으면 기본 값으로 swing easing을 사용한다.

easing 샘플 자료입니다.



4. 고급 easing 의 종류

http://www.robertpenner.com/easing/easing_demo.html



적용예제

샹드리아
샹드리아

샹드리아 사진

장미
장미

장미 사진

바다
바다

바다 사진


							$(document).ready(function(){
								$("#animatedGallery > div").hide();
								$("#animatedGallery > div:first").show();
								$("#animatedGallery h5").click(function () {
									$(this).next().animate(
										{'height':'toggle'}, 
										'slow',
										'easeOutBounce'
									);
								});
							});							
						


5. 애니메이션 큐

animation 함수에서 추가 옵션을 사용하는 방법.



6. jQuery UI 를 이용한 애니메이션

!!! test !!!
!!! test !!!
!!! test !!!
!!! test !!!