제이쿼리 -애니메이션 효과 제어 메서드

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

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

 

개념

함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장이된다. 큐는 ATM기기를 통해 은행 일을 보는 사람들을 생각하면 이해하기 쉽다.

사람들이 줄을 서 있고, 먼저 마친 사람은 먼저 나간다. 이와 같이 큐에 저장된 애니메이션 대기열이 있다면 먼저 들어간 애니메이션이 먼저 실행된다.

% 먼저 들어간 데이터가 먼저 처리되는 형식을 FIFO(first in first out)이라고 부른다.

종류

stop ,delay , queue , clearQueue , dequeue , finish가 있다.

 

-stop / delay 메서드

1.stop-> 요소에 적용한 애니메이션을 정지시킨다.

기본형

$(“요소 선택”).stop(); //진행중인 첫 번째 애니메이션만 정지

$(“요소 선택”).stop(clearQueue,finish); //clearQueue,finish는 ture나 false의 값 입력 가능.(기본값 false)

clearQueue == “true” -> 큐에 대기중인 애니메이션 모두 제거

finish == “true” ->진행 중인 애니메이션 강제 종료

 !!!! stop메서드 더 자세히 !!!!

case 1)진행중인 애니메이션만 정지시키는 경우

$(“.txt1”).animate({opacity:0.5},1000).animate({marginLeft:“500px”},1000)

$(“.txt1”).stop();

 

case 2)대기 중인 애니메이션은 제하고하고 진행 중인 애니메이션을 강제 종료 하는 경우

$(“.txt2”).animate({opacity:0.5},1000).animate({marginLeft:“500px”},1000);

$(“.txt2”).stop(true,true);

->stop()메서드는 첫 번째, 두 번째 인자값 (clearQueue,finish)에 따라 메서드 적용 방식이 달라진다.

모든 인자값을 생략한 stop()메서드 : 진행중인 애니메이션만 정지

모든 인자값에 ture를 적용 stop() 메서드 : 대기 중인 애니메이션은 제거되고 진행 중인 애니메이션은 강제로 종료된다.

 

2.delay-> 요소에 적용한 애니메이션을 지정한 시간만큼 지연시킨다.

기본형

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

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

->3초후에 애니메이션이 적용된다.

 

 

-queue() / dequeue() 메서드

1.queue -> 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가한다. 메서드를 실행하면 실행 이후의 모든 애니메이션이 취소된다.

 

기본형

1.큐의 함수 반환

$(“요소 선택 ”).queue();

2.큐에 함수 추가

$(“요소 선택”).queue (function () {자바스크립 코드} );

 

2.dequeue -> queue메서드 실행 이후에 적용된 애니메이션 메서드가 취소되지 않게 연결해 준다.

 

기본형

$(“요소 선택”).dequeue();

 !!!! 주의점 !!!!

queue 메서드를 실행하고 dequeue메서드를 생략하면 즉, 호출하지 않으면 queue 메서드 이후의 애니메이션이

적용되지 않으므로 적용되도록 꼭 dequeue 메서드를 같이 써준다.

-clearQueue() 메서드

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

 

기본형

$(“요소 선택”).clearQueue();