- 얼굴은 총 4단계로 움직입니다.
- 오른쪽으로 움직이고, 표정 한번 변하고 다시 표정 돌아오고 오른쪽으로 움직이고
- 움직이는 과정에서 clearQueue 버튼을 누르면 애니메이션이 종료됩니다.
- 유심히 볼것은 움직이는 상태에서 버튼을 누르면 해당 움직임까지는 진행 후 끝이납니다.
- 예약된 애니메이션을 지우는 것이므로 현재진행은 마치고 다음진행은 없는것이죠.
$( 셀렉터 ).clearQueue() - 해당 셀렉터의 애니메이션 예약(queue)을 지우기
- stop 메서드는 진행중인 애니메이션을 바로 멈춥니다.
참고 메서드 : .stop()
- 아마도 모든 애니메이션이 바로 종료되는것을 바랬는데 그렇게 되지 않았네요.
- 애니메이션 중인 얼굴은 멈췄지만 뒤에 예약된 작업까지 지워버리지는 않았으니까요.
- 다음예제에서 완벽히 멈춰볼까요?
- 순서상의 차이로 발생한 문제입니다.
- 원했던건 바로 멈추는 것인데, 얼굴 표정이 변하였네요.
$( '.css_test img' ).clearQueue().stop() - 일단 예약을 지우고 애니메이션을 멈춰야 원하는 결과가 나옵니다.
$( '.css_test img' ).stop().clearQueue() - 먼저 멈췄지만 뒤에 예약된 표정변화가 실행되었네요.
- 기억하세요~ 지우고 멈춥니다~
※ 이런것까지 사용해야 할 정도면 복잡한걸 해야하는 경우겠죠? 화이팅입니다 ~! ㅎ
- animate 메서드를 하나만 사용했다면 그냥 stop 메서드 하나로 됩니다. ^^