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

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

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

이렇게 준비해보았습니다.

실행화면입니다.

=============================== 
$('.b1').on("click",function(){
   $('.img1').clearQueue().stop().css({
    "top":"100px",
    "left":"450px"
   }).animate({
    "top":"500px"
   },3000).animate({
    "left":"1400px"
   },3000).animate({
    "top":"100px",
   },3000).animate({
    "top":"250px",
    "left":"900px"
   },3000);
  });
=============================== 

class b1가 click되면 <== 시작버튼입니다.
animate()메서드를 이용하여 원숭이그림이 이동하도록 만들어보았습니다.
이부분은 저번에 배웠기때문에 설명을 생략할께요^ㅡ^/

※clearQueue()메서드는 다음에 배워보록 하겠습니다.

시작 버튼을 누르기전 모습입니다.

시작 버튼을 누른뒤 원숭이 그림이 이동하는 모습입니다.
아래로 이동!

이번에는 오른쪽으로 이동!

마지막에는 중앙에 위치하도록 하였습니다.

=============================== 
$('.b2').on("click",function(){
   $('.img1').finish();
  });
=============================== 

class b2가 click되면 <== 시작버튼입니다.
class  img1(원숭이그림)에다가 finish()메서드를 실행하도록 하였습니다.

※finish()란 stop()메서드랑 비슷하지만 finish()는 현재 실행중인  애니메이션의
효과가 완료된 부분 즉 효과가 끝난 부분의 적용 시켜 멈추도록합니다.
형식은 finish( [queue ] )으로 구성되어있습니다.
queue 란에는 종료시킬 애니메이션의 이름을 적어주시면 됩니다.
[]에는 마찬가지로 필요할때만 사용하시면된답니다.

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

시작 버튼을 누르고 애니메이션이 실핼중일때 finish() 버튼을 누른 모습입니다.

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