[ 자바스크립트+jQuery 완전정복 스터디 2 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=9650875)

CH9 애니메이션 효과 다루기

lesson 01 - jQuery 애니메이션 효과 종류

02_jQuery 애니메이션 효과 종류

1_기본효과

jQuery는 일반적으로 가장 많이 사용하는 등장 효과(show, hide)와 페이드 효과(부드럽게 사라지고 나타나는 fadeIn, fadeOut)그리고 슬라이드 효과(slideIn, slideOut)를 기본으로 제공합니다.

2_사용자 정의 효과

jQuery는 기본 효과뿐 아니라 자신이 원하는 다양한 효과를 만들 수 있는 animate() 라는 메서드를 제공합니다.
기본 효과 역시 animate() 메서드를 이용해 만들어져 있습니다.

lesson 02 - 기본 애니메이션 효과 다루기

02_핵심 내용

1. 나타나고 사라지는 효과

show()
http://api.jquery.com/show/

hide()
http://api.jquery.com/hide/

매개변수

이름	설명
duration	효과가 지속될 시간 값으로 단위는 밀리초(1/1000초)이며 기본 값은 400ms 입니다. 값은 문자열(‘slow’, ‘normal’, ‘fast’)도 사용할 수 있습니다.
easing	사용할 easing 함수 이름
complete	효과(애니메이션)가 완료됐을 때 호출할 콜백 함수
options	위에 나열된 매개변수들을 하나의 객체로 묶어 간결하게 전달할 수 있습니다.

show, hide 메서드의 사용

show, hide 메서드의 사용2

2. 이징 함수 소개와 활용법

책 참고(P433 ~)

jQuery Easing Plugin
http://gsgd.co.uk/sandbox/jquery/easing/

3. 페이드(fade) 인/아웃 효과

fadeIn, fadeOut 메서드의 사용

4. 슬라이드(slide) 업/다운 효과

slideUp, slideDown 메서드의 사용

5. options 활용하기

옵션	설명
duration	애니메이션의 시간을 지정(형태:Number, String / 초기값:400)
easing	사용할 이징 함수의 이름을 지정(형태:String / 초기값: swing
step	애니메이션의 프레임이 진행될 때 호출되는 함수, 현재 애니메이션 프레임에 적용된 스타일 속성 값을 알아낼 때 주로 사용(형태:function(Number now, Tween tween)
complete	효과(애니메이션)가 완료됐을 때 호출할 콜백 함수(형태: function)
start	효과(애니메이션)가 시작될 때 호출할 콜백 함수(형태: function)
progress	step과 동일하게 애니메이션의 프레임이 진행될 때 호출되는 함수로 jQuery 1.8에서 추가되었으며 애니메이션의 진행률 및 남은 시간을 알 수 있음)(형태: function)
done	효과(애니메이션)가 완료 후 호출할 콜백 함수, complete와 동일하며 jQuery 1.8에서 추가(형태: function(Promise animation, Boolean jumpToend)

options toggle메서드 사용1(start, complete)

options toggle메서드 사용2(step)

options toggle메서드 사용3(progress, done)

lesson 03 - 사용자 정의 애니메이션 효과

jQuery에서는 사용자 정의 효과를 만들 수 있도록 animate()라는 메서드를 제공합니다.
앞에서 보았던 기본효과(show(), hide()등등) 메서드 내부는 animate() 메서드로 구현되어 있습니다.