[Do it!] 08. 효과와 애니메이션 [2.애니메이션 효과 제어 메서드]

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

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

 

애니메이션 적용 원리와 큐의 개념

애니메이션 메서드는 함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장됨

큐는 ATM기기를 통해 은행 일을 보는 사람들을 생각하면 이해하기 쉬움. 은행일을 보기 위해 사람들이 줄을 서있고 일을 먼저 마친 사람은 먼저 나옴.

큐에 저장된 애니메이션 대기열이 있다면 먼저 들어간 애니메이션이 먼저 실행됨

저장소에 저장된 순서대로 메서드가 실행됨

 

애니메이션 효과 제어 메서드의 종류

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

 

stop() 메서드

요소에 적용한 애니메이션 정지시키기

//stop() 메서드
$("요소").stop();			
$("요소").stop(clearQueue, finish);

- stop() : 진행중인 첫번째 애니메이션만 정지시킴. 큐에 대기 중인 애니메이션은 계속 실행

- clearQueue, finsish : true나 false의 값을 입력할 수 있음(기본값은 false).
- clearQueue가 true면 큐에서 대기중인 애니메이션을 모두 제거함.

- finish가 true면 진행 중인 애니메이션을 강제로 종료함

//진행 중인 애니메이션만 정지시키는 경우
$(".txt1").animate({opacity:0.5}. 1000).animate({marginLeft : "500px"}, 1000);
$(".txt1").stop();

//대기 중인 애니메이션은 제거. 진행중인 애니메이션은 강제 종료
//애니메이션 없이 바로 종료 시점으로 이동하기 때문에, css를 적용한 것처럼 딱딱하게 움직임
$(".txt2").animate({opacity:0.5}. 1000).animate({marginLeft : "500px"}, 1000);
$(".txt2").stop(true, true);

 

delay()메서드

$("요소").delay(지연시간).애니메이션효과메서드();

$(".txt1").delay(3000).animate({marginLeft:"500px"}, 1000);

 

 

queue() / dequeue() 메서드

큐(queue)에 적용된 애니메이션 함수를 반환 or 큐에 지정한 함수 추가

queue() 메서드 실행 시, 실행 이후의 모든 애니메이션이 취소됨

dequeue() 메서드는 queue() 메서드 실행 이후에 적용된 애니메이션 메서드가 취소되지 않게 연결해줌

1. queue의 함수 반환 
$("요소").queue();

2. queue에 함수 추가
$("요소").queue(function() {자바스크립트코드} );

3. dequeue 메서드
$("요소").dequeue();

 

clearQueue() 메서드

진행 중인(첫 번째) 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수 제거

$("요소").clearQueue();