[제이쿼리]- 애니메이션, 효과의 제어 메서드

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

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

이 메서드를 사용하려면 queue의 개념을 이해하고 있어야 한다. 

 

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

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

큐는 줄을 서서 대기하는 공간과 비슷하다. 

큐에 저장된 애니메이션이나 효과는 큐에 순서대로 대기를 하고, 순서대로 애니메이션이 실행된다.

(애니메이션1이 다 끝나면 애니메이션2가 실행되고 2가 다 끝나면 3이 실행된다)

먼저 들어간 데이터가 먼저 처리되는 형식을 FIFO(First In First Out)방식이라고 부른다. 

---

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

- stop( )

: 현재 실행중인 효과를 모두 중지시킴 / 요소에 적용한 애니메이션을 중지

[기본형]

1. 
$('요소선택').stop();
: 진행중인 첫번째 애니메이션만 정지시킨다. 큐에 대기중인 애니메이션은 계속해서 실행함


2. 
$('요소선택').stop(clearQueue, finsh);
: clearQueue, finsh자리에는 true나 false를 입력할 수 있다.(기본값은 false)
clearQueue가 true면 큐에서 대기중인 애니메이션을 모두 지우고, finsh가 true면 진행중인 
애니메이션을 강제로 종료시점으로 옮겨진다

 

- delay( )

: 지정한 시간만큼 지연했다가 애니메이션을 진행한다. 인자값으로 ms단위를 사용한다

[기본형]

$('요소선택').delay(지연시간).animate({css 속성: 값}, 소요시간, 가속도, 콜백함수)

 

- queue( )

: 큐에 지정한 함수를 추가하거나 큐에 대기 중인 함수를 배열에 담아서 반환함.

그리고 queue( )메서드 이후의 애니메이션 효과 메서드는 모두 취소된다.

[기본형]

1. 큐의 함수를 반환 시킬 때
$('요소선택').queue();

2. 큐에 함수를 추가할 때
$('요소선택').queue(function(){ 코드 });

 

- dequeue( )

: queue( ) 메서드를 사용하면 대기하고 있던 애니메이션 메서드가 모두 취소되는데 , 이 것을 막고 싶을 때 사용한다. 

이것을 사용하면 애니메이션 메서드가 제거되는 것을 막을 수 있다. 큐메서드 안에다 적어야지 부드럽게 연결된다. 

[기본형]

$('요소선택').dequeue();

 

- clearqueue( )

: 큐에서 처음으로 진행하고 있는 애니메이션을 제외하고 큐에서 대기 중인 애니메이션을 모두 제거한다. 

[기본형]

$('요소선택').clearqueue();

 

- finish( )

: 선택한 요소의 진행중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료한다. 

---

예제)

 

- stop()

 //opacity를 1초동안 50% 투명하게 만든다. 그 뒤 마진레프트를 300px만큼 0.5초동안 이동시킨다.

        $(".txt1")

          .animate({ opacity: 0.5 }, 1000) //1번째 애니메이션

          .animate({ marginLeft: "300px" }, 500); //큐에 대기중인 2번째 애니메이션 

        //1번째 애니메이션인 opacity만 취소된다. 그 뒤에 마진레프트는 그대로 실행

        $(".txt1").stop();

       $(".txt2")

          .animate({ opacity: 0.5 }, 500)

          .animate({ marginLeft: "300px" }, 500);

        //대기중인 애니메이션을 제거하고 진행중인 애니메이션은 강제로 종료 시점으로 보낸다.

        $(".txt2").stop(true, true);

 

 

 

-  delay()

 $(".txt2").delay(3000);

 $(".txt2").animate({ marginLeft: "300px" }, 1000);

딜레이메서드가 애니메이션보다 위에 있어야한다. 

혹은 한줄로 연결해서 써줘도 된다. 

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

 

- on click하고 같이 사용한 예제

 $(".btn1").on("click", moveElement);

        function moveElement() {

          $(".txt3").animate({ marginLeft: "+=50px" }, 800);

          $(".txt4").animate({ marginLeft: "+=50px" }, 800);

          $(".txt4").stop();

          $(".txt5").animate({ marginLeft: "+=50px" }, 800);

          $(".txt5").stop(true, true);

        }

---

- queue()

 

     $(".txt1")

          .animate({ marginLeft: "200px" }, 1000)

          .animate({ marginTop: "200px" }, 1000)

          .queue(function () {

            $(this).css({ background: "gold" });

          })

          .animate({ marginLeft: "0px" }, 1000)

          .animate({ marginTop: "0px" }, 1000); //queue이후의 애니메이션효과메서드는 취소된다.

 

queue는 queue이후의 애니메이션효과 메서드를 취소시키므로 큐 이후에 애니메이션을 적어놔도 작동이 안되는 것을 확인할 수 있다. 

그래서 이때 dequeue( )를 사용한다

 

- dequeue( )

 

      $(".txt1")

          .animate({ marginLeft: "200px" }, 1000)

          .animate({ marginTop: "200px" }, 1000)

          .queue(function () {

            $(this).css({ background: "gold" });

            $(this).dequeue(); // queue에 의해 취소되는 아래 애니메이션을 다시 작동하게 연결해준다

          })

          .animate({ marginLeft: "0px" }, 1000)

          .animate({ marginTop: "0px" }, 1000); //queue이후의 애니메이션효과메서드는 취소된다.

 

디큐를 연결해주면 다시 아래의 애니메이션도 작동하는 것을 볼 수 있다.

 

- clearqueue( )

 

   $(".txt3")

          .animate({ marginLeft: "100px" }, 500)

          .animate({ marginLeft: "300px" }, 500)

          .animate({ marginLeft: "400px" }, 500); //대입연산자가 아니기때문에 최종적으로는 400px의 위치에 가게된다. 좌표값이기때문에

        $(".txt3").clearQueue();

 

클리어큐는 첫번째 애니메이션만 실행하고 그 뒤는 취소시키기때문에 뒤의 애니메이션은 작동하지않는다.