Animation2

사용자 지정 효과

이벤트 관련 method
예제 설명
animate() 사용자 지정 효과를 생성합니다.
clearQueue() 큐의 내용을 제거합니다.
delay() 큐에 있는 명령을 잠시 중단합니다.
  1. $(selector).animate(object);
  2. $(selector).animate(object, speed);
  3. $(selector).animate(object, speed, easing);
  4. $(selector).animate(object, speed, easing, callback);

animate() 메서드는 첫 번째 변수에 객체가 들어간다는 것을 제외하면, 저수준의 시각 효과 메서드와 같은 매개 변수를 갖습니다. animate() 메서드의 첫 번째 변수인 객체에 입력할 수 있는 속성은 다음과 같습니다. 현재 형태에서 지정한 속성의 형태로 동작합니다.

opacity, top, left, right, bottom, height, width, margin, padding

위치 속성(left속성과 top속성)을 변경하는 animate() 메서드를 사용하려면 position 스타일 속성이 absolute나 relative이어야 합니다.



상대적 애니메이션

현재 상태에서 상대적으로 애니메이션을 적용하려면 어떻게 해야 할까요? animate() 메서드는 스타일 속성을 동적으로 변경해 애니메이션 효과를 내는 것으로, 현재 스타일 속성을 알아내 추가 값을 부여해 상대적으로 애니메이션을 적용합니다.
우선, 이 방법으로 간단한 애니메이션을 만들어 봅시다.
상대적으로 속성을 변화시키려면 현재 속성을 알아내야 합니다. css() 메서드를 사용해서 이벤트 발생 객체의 width속성과 height속성을 추출합니다.
하지만, 현재 변수 w와 h는 숫자가 아니라 '50px' 형태의 문자열입니다. 상대적으로 크게하려면 숫자로 바꾼 뒤에 더해야 합니다. parseInt()함수를 사용하면 문자열 '50px'을 숫자 50으로 바꿀 수 있습니다. 현재 크기를 기준으로 50을 추가하므로 점점 커지는 애니메이션을 만들 수 있습니다.
이렇게 현재 상태를 기준으로 속성을 상대적으로 변화시키는 형태의 애니메이션은 굉장히 많이 사용됩니다. 그래서 jQuery는 사용자의 편의를 위해 animate() 메서드에 정말 유용한 형태의 방법을 제공합니다. += 연산자나 -= 연산자를 사용하면 상대적으로 속성이 변합니다.

코드를 실행하고 사각형을 클릭하면 사각형이 계속 커집니다.
간단한 내용이지만 중요한 내용이미로 꼭 기억해주세요. 사각형을 매우 빠르게 여러 번 클릭해보세요. 마우스 클릭을 멈춘 후에도 계속해서 클릭 이벤트가 누적돼 사각형이 커집니다.



애니메이션 큐

사각형을 여러 번 클릭하면 알 수 있지만 jQuery의 효과 메서드는 계속 누적됩니다. 누적된 효과 명령은 큐(Queue)에 누적됩니다. 큐는 먼저 들어간 것이 먼저 나오는 공간입니다. jQuery의 효과 메서드를 사용하면 명령이 차례차례 큐에 들어가고, 들러간 순서대로 실행됩니다.

상기 예제의 코드를 실행하면 동시에 애니메이션이 실행되는 것이 아니라 차례대로 실행됩니다. 각 애니메이션을 0.5초 동안 동작하게 했으므로 1.5초 동안 애니메이션이 작동합니다. 애니메이션 큐에 animate() 메서드의 내용이 하나하나 들어가고 하나하나 나오면서 실행되므로 애니메이션이 순서대로 동작합니다. 만약 큐에 있는 내용을 제거하고 싶을 때는 clearQueue() 메서드를 사용합니다.

상단의 예제는 애니메이션이 동작하고 3초 후에 clearQueue() 메서드를 사용하는 예입니다. left 스타일 속성 애니메이션이 실행된 후에 width 스타일 속성 애니메이션이 실행되는 중간에 애니메이션이 모두 종료되고, 큐를 비운 뒤에 hide() 메서드를 실행할 것이라고 예측될 것입니다. hide() 메서드를 제거하고 다시 실행해 보면 width 스타일 속성 애니메이션은 모두 끝까지 진행합니다. clearQueue() 메서드가 큐를 비우므로, 이후에 추가하는 효과가 실행되지 않지만, 실행되던 애니메이션을 정지하는 기능은 없다는 사실을 기억해주세요.



애니메이션 정지

clearQueue() 메서드에는 애니메이션 정지 기능이 없습니다. 애니메이션을 정지시키려면 stop() 메서드를 사용합니다.
stop() 메서드는 다음과 같은 세 가지 형태로 사용합니다.

  1. $(selector).stop();
  2. $(selector).stop(clearQueue);
  3. $(selector).stop(clearQueue, goToEnd);

매개 변수 clearQueue와 goToEnd는 불리언을 입력하며, 입력하지 않으면 false를 입력한 것으로 간주합니다. 첫 번째 매개 변수 clearQueue를 true로 설정하면 clearQueue() 메서드를 실행하는 것과 같은 효과를 냅니다. 두 번째 매개 변수 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 지정한 최종 형태에서 멈춥니다. 간단하게 stop() 메서드가 나올 수 있는 모든 형태의 조건을 사용해 봅시다.

아래와 같이 네개의 버튼을 만듭니다. 각 이름이 의미하는 형태의 메서드를 eval()함수를 사용해 실행할 것입니다.
각 메서드가 어떤 차리를 보이는지 설명하는 것보다 직접 보는 것이 빠릅니다.



  1. 1 stop() : 오른쪽으로 이동하는 것을 멈추고 제자리에서 바로 왼쪽으로 다시 이동합니다.
  2. 2 stop(true) : 오른쪽으로 이동하는 것을 멈추고, 다시 setInterval()할수가 실행될 때까지 대기합니다.
  3. 3 stop(false, true) : 버튼을 누르는 순간 사각형이 오른쪽 끝으로 이동하고, 바로 왼쪽으로 이동합니다.
  4. 4 stop(true, true) : 버튼을 누르는 순간 사각형이 오른쪽 끝으로 이동하고, 다음 setInterval() 함수가 실행될 때까지 대기합니다.


애니메이션 지연

지금까지 사용한 모든 효과 메서드는 메서드를 실행하자마자 바로 시작했습니다. jQuery의 효과 관련 메서드를 특정한 시간 후에 실행하고 싶을 때는 delay() 메서드를 사용합니다.
delay() 메서드의 매개변수에 정지하려는 시간을 밀리초 단위로 입력합니다. 아래 예제에서는 사각형이 순서대로 오른쪽으로 이동하는 효과를 볼 수 있습니다.