05. 효과, 애니메이션 메서드

1. 효과 메서드

효과 메서드에는 선택한 요소를

역동적으로 숨겼다가 보이게 만드는 기능을 가진

메서드가 있다.

 

효과 메서드의 기본형은 다음과 같다.

효과 메서드는

1. 효과 소요 시간 : 요소를 숨기거나 노출할 때 소요되는 시간

적용방법

방법 1: "slow", "normal", "fast"

방법 2: 1.000(1초), 500(0.5초)

 

2. 가속도: 숨기거나 노출하는 동안의 가속도 설정

적용방법

방법 1. "swing" : 

시작과 끝은 느리게, 중간은 빠른 속도로 움직임(기본값)

방법 2. "linear" : 일정한 속도로 움직임

 

3. 콜백 함수: 노출과 숨김 효과가 끝난 후에 실행할 함수(생략 가능)

를 인자값으로 전달할 수 있다.

 

다음은 효과 메서드의 종류이다

1) 숨김

hide( )	요소를 숨김
fadeOut( )	요소가 점점 투명해지면서 사라짐
slideUp( )	요소가 위로 접히며 숨겨짐

2) 노출

show( )	숨겨진 요소가 노출됨
fadeIn( )	숨겨진 요소가 점점 선명해짐
slideDown( )	숨겨진 요소가 아래로 펼쳐짐

3) 노출, 숨김

toggle( )	hide( ), show( ) 효과를 적용
fadeToggle( )	fadeIn( ), fadeOut( ) 효과를 적용
slideToggle( )	slideUp( ), slideDown( ) 효과를 적용
fadeTo( )	지정한 투명도를 적용

id값이 "box"인 요소를 2초간 위로 올려 숨기는 예를 들어보겠다.

2. 애니메이션 메서드

애니메이션 메서드를 적용하면

스타일을 적용한 요소를 움직이게 할 수 있다.

1. 스타일 속성: 애니메이션으로 적용할 스타일

2. 적용 시간: 동작에 반응하는 데 소요되는 시간

3. 가속도 : 효과 함수와 동일

4. 콜백 함수 : 효과 함수와 동일

 

2.1. 애니메이션 효과 제어 메소드

애니메이션 효과 제어 메서드란

효과 또는 애니메이션이 젹용된 요소의 동작을 제어하는 메서드이다.

 

애니메이션 메서드는 함수가 적용된 순서대로

큐(queue)에 저장되기에

먼저 들어간 애니메이션이 먼저 실행된다.

 

애니메이션 효과 제어 메서드의 종류는 다음과 같다.

stop( )	현재 실행 중인 효과를 모두 중지
delay( )	지정한 시간만큼 지연했다가 애니메이션을 진행
queue( )	큐에 사용자 정의 함수를 추가하거나 또는 대기 중인 함수를 배열에 담아 반환 queue( )메서드 이후의 애니메이션 효과 메서드는 모두 취소함
clearQueue( )	큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기 중인 애니메이션은 모두 제거
dequeue( )	queue( ) 메서드 이용 시 대기하고 있는 애니메이션 메서드는 제거됨 그러나 dequeue( ) 메서드 이용 시 메서드가 제거되는 것을 막을 수 있음
finish( )	선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료

1) stop( ) / delay( ) 메서드 기본형

2) queue( ) / dequeue( ) 메서드 기본형

3) clearQueue( ) 메서드 기본형