jQuery - Effect : stop()

 $(selector).stop(stopAll,goToEnd);

 - stopAll : 애니메이션 queue가 clear 되는지 여부, 
               디폴트값은 false, 즉 중간에 stop 되면 현재 애니메이션만 중단되고 다음 애니메이션이 진행 
 - goToEnd : stop() 될때 곧바로 애니메이션의 끝 상태로.  디폴트 값은 false

 

$(document).ready(function(){

* #start 버튼을 누르면 다음 애니메이션이 '차례대로' 진행
 1. 사각형이 오른쪽으로 100px 움직이고 (5초)
 2. 글자 크기가 3em 으로 커지게 하기 (5초)

$("#start").click(function(){
        $("div").animate({left: '100px'}, 5000);
        $("div").animate({fontSize: '3em'}, 5000);
});

$("#stop").click(function(){
    $("div").stop();  // 현재 진행 중인 애니메이션만 종료
// 애니메이션 큐에 남아있는 애니메이션이 있었다면 다음 애니메이션이 진행된다
});

$("#stopAll").click(function(){
    $("div").stop(true);  // 애니메이션 큐의 모든 애니메이션 종료
});

 * 첫번째 anim중 stop() 하면? 아래 각각의 경우는?
  goToEnd 값이 true 이면 진행 중인 애니메이션의 '끝'으로 멈춤

$("#stopButFinish").click(function(){
    // $("div").stop(false, true);
    $("div").stop(true, true);
 });
});