[jQuery] stop() & clearQueue() & delay()

[jQuery] stop() & clearQueue() & delay()

animate stop() & Queue() & delay()

[출처]https://webclub.tistory.com/461

1. 애니메이션 큐

• 큐는 특정한 앨리먼트에서 발생될 애니메이션 목록이다.
• 제이쿼리를 사용해 엘리먼트에서 애니메이션을 실행시킬 때마다 애니메이션 큐에 저장된다.
• 엘리먼트는 큐의 모든 애니메이션이 완료될 때까지 큐에 저장된 애니메이션을 한번에 하나씩 실행시킨다.

큐는 먼저 들어간 것이 먼저 나오는 공간을 말한다.

jQuery의 효과 메서드를 사용하면 효과 명령이 차례대로 큐에들어가고, 들어간 순서대로 실행된다.

$('.queue-box').on('click', function(){ 
	$(this)
    .aniamte({
    left : '+=60'
  }, 2000)
  .animate({
    width : '+=60'
  }, 2000)
  .animate({
    height : '+=60'
  }, 2000)
});

위의 코드를 실행하면 동시(한꺼번)에 애니메이션이 실행되는 것이 아니라 차례대로 실행된다.

각 애니메이션의 duration을 2000(2초)으로 설정했으므로 각 2초씩 등장하여 6초동안 애니메이션이 동작하게 된다.

애니메이션 큐에는 animate() 메서드의 내용이 하나하나 들어가고 하나하나 나오면서 실행되므로 애니메이션이 순서대로 동작하게 된다.

먼저 들어간 명령을 차례대로 실행하게 된다.

즉, 먼저 들어간 것이 먼저 나오게 되는 것이 "큐"란 공간이다.

 

2. clearQueue()

• clearQueue() 메소드는 큐에 있는 내용을 제거하고 싶을 경우에 사용한다.

// 애니메이션을 차례대로 실행하도록 한다.
$('.queue-box').animate({ left : '+=60'}, 2000);
$('.queue-box').animate({ width : '+=60'}, 2000);
$('.queue-box').animate({ height : '+=60'}, 2000);

// 3초후에 함수를 실행한다.
setTimeout(function(){
  // 애니메이션의 큐를 제거한다.
  $('.queue-box').clearQueue();
}, 3000);

clearQueue() 메소드는 큐가 비워진 시점에 애니메이션이 진행중인 것이 있다면 해당 애니메이션까지는 동작하고 그 이후에 애니메이션 큐를 비우게 되므로 이후에 추가되는 애니메이션 효과는 동작하지 않게 된다.

그리고 이후에 추가하는 효과는 실행되지 않지만 실행되던 애니메이션을 정지하는 기능은 없다.

 

clearQueue() :: 여러개의 애니메이션일 경우 해당 애니메이션 동작하고, 그 이후에 애니메이션 큐를 비우게 된다.
이후에 추가되는 애니메이션 효과는 동작하지 않는다.

 

이후에 추가하는 효과는 실행되지 않지만 실행되던 애니메이션을 정지하는 기능은 없다. -> stop() 사용

 

Q. 위의 예제에 clearQueue() 가 아닌 stop()을 할 경우,

A. left, width, height 애니메이션이 모두 실행된다.

3. stop()

위에서 clearQueue() 메서드는 큐를 제거할 뿐 효과 중간에 애니메이션을 정지하는 기능은 포함하고 있지 않다.

• 애니메이션을 정지하라면 stop() 메서드를 사용해야 한다.

$(selector).stop();
$(selector).stop(clrearQueue); 
$(selector).stop(clearQueue, gotoEnd);

매개변수 clearQueue와 gotoEnd는 불리언값으인 true, false를 입력한다.

기본값(default) 은 stop(false, false)

첫 번째 매개변수인 clearQueue를 true로 설정하면 clearQueue()메서드를 실행하는 것과 같은 효과를 낸다.

두 번째 매개변수인 gotoEnd를 true로 설정하면 제자리에서 멈추는 것이 아닌 효과를 지정한 최종형태에서 멈추게 된다.

clearQueue : true :: 효과 애니메이션 큐의 내용을 제거

goToEnd : true :: 실행중인 애니메이션 최종위치로 바로 이동

<button>stop(false, false)</button>
<button>stop(true,false)</button>
<button>stop(false, true)</button>
<button>stop(true, true)</button>
<div class="box1"></div>

$('button').on('click', function(){
	var $html = $(this).html();  
  var evalText = '$(".box1").' + $html;
  
  // 메서드실행
  eval(evalText);
});
setInterval(function(){
  $('.box1')
  	.animate({
    	left: '500'
  }, 1000)
  	.animate({
    	left: 0
  }, 1000)
}, 3000);

위 효과는 setInterval로 인해 3초마다 애니메이션이 동작하도록 정의되어 있다.

1초간 오른쪽으로 500px을 이동하고 1초간 left: 0 으로 인해 제자리로 돌아오는 효과이다. 그리고 3초간의 인터벌로 인해 2초간의 애니메이션 효과가 끝난 후 1초간 애니메이션이 정지한 것과 같은 효과를 내고 있다.

 

위의 각 버튼을 클릭한 효과는 다음과 같다.

1) stop(false, false)

• 우측으로 500px이동하는 중에 클릭 -> 오른쪽으로 이동하는 것을 멈추고 제자리에서 바로 왼쪽으로 되돌아간다.

  stop()메서드는 기본적으로 애니메이션을 정지하는 기능으로,

  우측 이동중에 stop() 버튼 클릭했다면 첫 번째 애니메이트 메서드에서 적용된 left: 500이 바로 정지하고 다음 애니메이트가 적용된 left: 0의 효과가 나와 제자리로 돌아가나,

  제자리로 돌아가는 도중에 stop()버튼을 클릭했다면 바로 애니메이션이 정지하게 된다.

  앞선 애니메이션인 우측으로 이동하는 효과는 완료된 상태이고 마지막 애니메이션이 실행하는 중에 stop()클릭한 경우라면 제자리로 돌아오는 중에 멈추는 것이 당연하다.

2) stop(true, false)

• clearQueue가 적용된 버튼으로 우측, 좌측으로 이동하던 것을 멈추고 setInterval()함수가 실행될 때까지 대기한다.

  다시 말해, 애니메이션을 정지하면서 큐를 제거한다.

  우측으로 이동시에 버튼을 누르면 애니메이션이 효과가 정지하면서 두 번째 대기 중인 큐인 애니메이트 큐가 제거될것이고,

  제자리로 돌아오는 도중에 클릭했다면 애니메이션 효과가 정지하고 대기중인 큐가 없으므로 setInterval()함수가 실행될 때까지 대기하게 된다.

3) stop(false, true)

• goToEnd를 true로 지정할 시 최종상태에서 멈춘다.

  우측버튼 클릭 시 left: 500효과가 실행 중이고 이 효과의 최종상태에서 멈추게 된다. 그래서 우측으로 이동중에 버튼을 누르면 빠르게 순간이동한 것처럼 이동 후 다음 애니메이트가 실행한다.

  그리고 좌측으로 되돌아오는 중에 버튼을 눌렀다면 left: 0의 최종상태로 빠르게 효과가 완성된 후 멈춘다.

  다시 말해, goToEnd의 true값은 해당 애니메이션 효과를 최종상태로 정지시키는 효과이다.

4) stop(true, true)

• 큐를 제거하는 동시에 애니메이션 효과도 최종상태로 정시킨다.

  우측버튼 클릭 시 순간 박스는 우측 이동중인 효과를 최종상태로 정지시키면서 대기 중인 큐를 제거한다.

  혹시 좌측으로 돌아오고 있기 때문에 큐가 제거되지 않을거라 생각하지만 setInterval()메서드 실행 후 다시 우측으로 이동한 후 좌측으로 돌아오기 때문에 그렇게 보이는 것이다.

 

---

 

[추가]위보다 아래 예제가 이해잘됨

<div class="box"></div>

body { width: 500px; margin: 40px auto; }
.box { position: relative; width: 50px; height: 50px; background-color: #444; }

$('.box')
	.animate({left: '+=60'}, 2000)
        .aniamte({width: '+=60'}, 2000)
        .animate({height: '+=60'}, 2000)

// 3초후에 함수 실행.
setTimeout(function(){
  $('.box').stop(false, false); // (1)
  $('.box').stop(true, false); 	// (2)
  $('.box').stop(false, true);	// (3)
  $('.box').stop(false, false);	// (4)
}, 3000);

(1) stop(false, false)

3초 후에 stop()이 실행되므로 left 이동(2초) -> width 넓어지다 멈춘다.(3초 끝!) -> height += 60 실행

(2) stop(true, false)

3초 후에 stop(true)이 실행되므로 left 이동(2초) -> width 넓어지다가 멈춘다.(3초 끝!) -> 큐가 비워짐

(3) stop(false, true)

3초 후에 stop(false, true)이 실행되므로 left 이동(2초) -> width 넓어지다가(3초 끝!) animate 초(ms)는 중지되고 스타일 실행(width += 60) -> 이어서 height +=60 실행

(4) stop(true, true)

3초 후에 stop(true, true) 이 실행되므로 left 이동(2초) -> width 넓어지다가(3초 끝) animate 초(ms) 중지, 스타일 실행(width += 60)

goToEnd :: 애니메이션 스타일만 적용. ms적용안됨.

 

---

 

4. delay()

• delay() 는 실행중인 함수를 정해진 시간만큼 중지(연기)시킨다.

.delay( duration, [, queueName] )

duration에는 중지할 시간이 들어간다. 숫자로 정할 때는 단위의 1/1000초이고, slow(600) 또는 fast(200)로 정할 수 있다.

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<button>애니메이션 delay 실행하기</button>

.box { margin-top: 20px; width: 50px; height: 50px; background-color: blue; position: relative; }
button { margin-top: 20px; }

$('button').on('click', function(){
  $('.box').each(function(index){
    $(this)
      .delay(index*500)
    	.animate({
      	left: '300'
    }, 'slow')
    	.delay((index+500)*500)
    	.aniamte({
      	left: 0
    }, 'slow')
  })
});

각 박스는 delay() 메서드로 인해 0.5초 지연 후에 애니메이션 효과가 나타난다.