[jQuery] .animate() 함수에서 .stop() 함수의 중요성

[jQuery] .animate() 함수에서 .stop() 함수의 중요성

jQuery 에서 .animate() 함수를 구현할 때 흔히 만나게 되는 문제가 하나 있다.

바로 애니메이션 큐(queue) 이다.

예를 들어, 네이게이션 메뉴에 마우스 오버가 되면 애니메이션이 동작하게 코딩이 된 경우,

마우스를 여러번 움직일때, 이전 애니메이션이 멈추기 전까지 애니메이션이 동작하지 않는 현상이 바로 애니메이션 큐로 인해 발생하는 문제이다.

이러한 문제를 해결하기 위해 .stop() 함수를 사용한다.

.stop() : 현재 동작하고 있는 애니메이션은 즉시 동작이 중단 된다.

.stop() 함수 사용하는 방법

$("#element").stop().animate( { width: "200px" }, 500);

아래 예제를 통해 실제로 한번 보자.

각 항목에 마우스를 위아래로 여러차례 빠르게 움직여 보면 .stop() 함수를 사용하기 전과 후의 차이를 정확하게 확인 할 수 있다.

$(".stop li").hover(

  function () {

      $(this).stop().animate({width:"200px"},500);

  },

   function () {

    $(this).stop().animate({width:"50px"},500);

  } 

);

.stop() 함수는 현재 동작하는 애니메이션에 대해서만 동작을 중단하기 때문에

다른 종류의 큐(queue)를 중단하고 싶다면 .clearQueue() 함수를 대신 사용해야 한다.