Jquery[제이쿼리] clearQueue() 메서드 배우기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] clearQueue() 메서드를 배워보겠습니다.

어제 내용에서 초록색으로 표시한부분만 수정하였습니다.

실행을 하면 이렇게 나온답니다.

어제부분에서 초록색 부분만 수정하였습니다.

=============================== 
$('.b2').on("click",function(){
   $('.img1').stop();
  });
=============================== 
class b2가 click되면 <== stop()버튼입니다.
class img1을 stop()하라입니다.
stop()메서드는 저번에 배웠답니다. 
실행중인 애니메이션을 정지시키는 메서드였죠?

그럼 실행해보겠습니다.

시작 버튼을 누른뒤에 화면에 표시한부분에서 stop()버튼을 눌러보았습니다.
하지만 
=============================== 
.animate({
    "top":"500px"
   },3000)
=============================== 
부분만 정지 되었을뿐 그다음 


=============================== 
animate({
    "left":"1400px"
   },3000)
=============================== 
부분이 실행 되는 모습입니다.

표시한부분에서 다시 stop()버튼을 누른 모습입니다.
실행할 애니메이션(animate())이 1개인 경우는 stop()만 써도 상관이없지만
실행할 애니메이션(animate())이 여러개가 예약되어있는 경우는!
clearQueue()메서드를 써줘야한답니다.

=============================== 
$('.b3').on("click",function(){
   $('.img1').clearQueue().stop();
  });
=============================== 
class b3가 click되면 <== clearQueue().stop()버튼입니다.
class img1을 clearQueue().stop()하라입니다.

※clearQueue()란 실행되지 않은 큐에 있는 모든기능을 제거하는 메서드입니다.
형식은 clearQueue( [queueName ] ) 으로 구성되어있습니다.
queueName란에는 삭제할 큐의 이름을 적어주시면된답니다.
타입은 String입니다.

이해가 안되는 분들은 ↓↓↓↓↓↓
http://api.jquery.com/clearQueue/

시작버튼을 누르고난뒤 clearQueue().stop()버튼을 누른뒤의 모습입니다.
대기중인 큐의내용을 지우고 stop()메서드가 실행되었기때문에 더이상 이동을 안한답니다.

오늘은 제이쿼리[jquery] clearQueue() 메서드를 배워보았습니다.
그럼 다음에 또만나요