효과 제어 메서드

* 효과 제어 메서드란?

- 효과 또는 애니메이션이 적용된 요소에 동작을 정지시키거나 동작 초기 실행을 지연시키는 등의 제어를 할 수 있는 메서드

- 효과 제어 메서드의 종류

종류	풀이
stop()	현재 실행 중인 효과를 모두 정지시킴.
delay()	스택에 대기 중인 애니메이션 효과를 지연시킴.  다시 말하면, 대기 중인 효과가 지정한 시간만큼 지연된 후 발생됨.
queue()	선택된 요소의 스택에 대기 중인 큐를 반환하거나 함수에 실행문을 큐로 추가시킬 수 있음.
clearQueue()	첫 번째 큐에 해당하는 효과 또는 애니메이션만 실행하고 대기 중인 큐를 모두 삭제함.
dequeue()	스택에 쌓인 큐를 모두 제거함.
finish()	선택한 요소의 진행 중인 애니메이션이 강제로 완료 시점으로 간 후 종료됨.

 

 

(1) stop() / delay() 메서드

- stop() 메서드는 선택한 요소에 효과(Effect) 또는 애니메이션이 적용된 효과를 정지시킴.

- delay() 메서드는 선택한 요소에 효과 또는 애니메이션이 실행될 때 시작되는 시간을 지연시킴.

- 기본형

1. $(요소 선택).stop();  2. $(요소 선택).delay(지연 시간).애니메이션 또는 효과 메서드();

 

 

(2) queue() / clearQueue() 메서드

- queue() 메서드는 큐(queue)에 저장된 함수 또는 메서드를 반환하거나, 큐에 함수를 저장하고 저장한 이후에 적용된 메서드는 모두 제거함.

- clearQueue() 메서드는 큐에 들어와 대기 중인 메서드 중 최초에 들어와 실행 중인 메서드만 제외하고 모든 대기 중인 메서드는 제거함.

- 기본형

1. $(요소 선택).queue();  2. $(요소 선택).queue(function() { ... });  3. $(요소 선택).clearQueue();

 

 

(3) dequeue() 메서드

- 선택한 요소 큐에 대기 중인 모든 메서드 또는 함수를 제거시킴.

- clearQueue()는 첫 번째 실행 중인 메서드만 제외하고 대기 중인 메서드를 제거하지만, dequeue() 메서드는 모든 메서드를 제거함.

- 기본형

$(요소 선택).dequee();

 

 

(4) finish() 메서드

- 선택한 요소에 애니메이션 동작(Motion) 과정은 모두 생략하고, 최종 완료 시점만 보여주고 종료함. (동작은 생략하고 결과만 보여줌.)

- 기본형

$(요소 선택).finish();

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)