jQuery - 애니메이션 제어

애니메이션은 .animate() 메소드를 사용합니다. .animate() 와 함께 제어할 수 있는 메소드는 다음 표와 같습니다.

메소드	설 명
.stop(queue, clearqueue, finish)	실행 중인 애니메이션(또는 동적 효과)를 끝나기 전에 중지시킴. .slide*(), .*toggle(), .*fade(), show(), hide() 와 같은 효과와 .animate() 등 모든 효과 함수에서 사용 가능 queue: 항목을 중지할 대기열의 이름   (선택사항. 1.7 버전부터 사용) clearqueue: 대기중인 항목을 중지. 선택사항   true | false 중 하나. 기본값 false   true 이면 대기중인 애니메이션 모두 중지 finish: 진행중인 항목을 강제로 중지 여부. 선택사항   true | false 중 하나. 기본값 false   true 이면 강제로 중지
.delay(speed, queue)	대기열의 다음 항목이 실행되기 전에 지연할 시간 단, 인자가 없는 함수 .show() 나 .hide() 에는 지연되지 않음 1.4 버전부터 사용 speed: 지연할 시간.   slow | fast | 밀리 초 중 하나   slow 는 200(밀리 초), fast 는 600(밀리 초) queue: 지연할 큐의 이름. 선택사항
.finish(queue)	실행 중이거나 대기중인 항목 모두를 제거하고 모든 항목이 즉시 완료 상태가 됨 queue: 애니메이션을 중지할 대기열의 이름   (선택사항)
.queue(queue)	실행될 대기열 함수를 표시하거나 함수 큐를 조작 .queue() 가 실행된 이후 대기열은 모두 중지됨 queue: 대기열의 이름. 기본값 fx (표준 대기열)   (선택사항)
.degueue(queue)	선택한 요소의 대기열에서 다음 함수를 실행 .queue() 실행되면 그 다음의 대기중인 항목이 제거되지만 다음 함수가 실행되도록 하는 메소드 queue: 대기열의 이름. 기본값 fx (표준 대기열)   (선택사항)
.clearQueue()	진행중인 항목을 제외한 대기중인 항목 모두 제거

.queue() 와 .dequeue()

.queue() 메소드는 큐에 대기중인 함수를 반환하거나 새로운 함수를 추가하여 애니메이션을 제어할 수 있습니다.

매개 변수에는 QueueName 이나 function(...) 을 지정할 수 있으며 형식은 다음과 같습니다.

// 대기열의 큐 함수를 반환
$(select).queue();

// 큐에 새로운 함수를 추가
$(select).queue(function);

// 큐의 이름을 지정
$(select).queue(QueueName);

// 후속 애니메이션을 실행
$(select).queue().degueue();

QueueName 에는 큐의 이름을 지정합니다. 기본 값은 표준 효과 큐인 'fx' 입니다. .queue() 메소드는 .dequeue() 메소드와 함께 사용할 수 있으며, 여러 개의 큐를 가질 수 있습니다.

아래 예제는 선택한 요소의 실행될 함수 큐와 개수를 출력합니다.

<style>
#use {
  border: 1px solid;
  width: 100px;
  height: 100px;
  background: #9c9;
  position: absolute;
}
</style>

<script>
$(function(){
  $("#use")
  .animate({'right': '100'}, 1000)
  .animate({'bottom': '100'}, 2000)
  .animate({'left': '100'}, 1000)
  .animate({'top': '100'}, 2000);

  $("span").text($("#use").queue().length);
  /* 결과: 큐의 개수는 4개 */ 

  $("button").click(function(){
    alert($("#use").queue());  
  });
  /*
  결과:
  inprogress,function(){var e=dt(this,k.extend({},t),o);
  (i||Q.get(this,"finish"))&&e.stop(!0)},function(){var e=dt(this,k.extend({},t),o);
  (i||Q.get(this,"finish"))&&e.stop(!0)},function(){var e=dt(this,k.extend({},t),o);
  (i||Q.get(this,"finish"))&&e.stop(!0)}
  */
});
</script>

<div>큐의 개수는 <span></span>개</div>
<button>큐 함수</button>

<div id="use">안녕 하보니</div>

아래는 .animate() 와 .queue(), dequeue() 메소드를 이용한 예제입니다.  요소를 클릭하면 애니메이션이 진행되며 .queue() 에 의해 중간에 색상을 바꾼다는 메시지를 보여주고 배경색을 변경합니다.

<style>
#use {
  border: 1px solid;
  width: 100px;
  height: 100px;
  background: #9c9;
  position: absolute;
}
</style>

<script>
$(function(){
 $("#use").click(function(){
  $(this)
  .animate({'right': '100'}, 1000)
  .animate({'bottom': '100'}, 2000)
  .animate({'left': '100'}, 1000)
  .queue(function(){
    alert("색상을 바꿀꺼야~");

    $(this).css('background', '#CCC');
  })
  .dequeue()
  .animate({'top': '100'}, 2000);
 });
});
</script>

<div id="use">안녕 하보니</div>

.dequeue() 는 꼭 .queue() 끝에 연결하지 않아도 됩니다. .queue() 에 정의된 함수에 연결해도 동일하게 동작합니다.

$(this)
  .animate({'right': '100'}, 1000)
  .animate({'bottom': '100'}, 2000)
  .animate({'left': '100'}, 1000)
  .queue(function(){
    alert("색상을 바꿀꺼야~");

    $(this).css('background', '#CCC').dequeue();
  })
  .animate({'top': '100'}, 2000);
});

.stop() 와 .clearQueue()

.clearQueue() 는 대기중인 항목을 제거하고, .stop() 메소드는 진행 중인 애니메이션이 끝나기 전에 중지하는데 사용됩니다.

'시작' 버튼을 클릭하면 애니메이션이 진행됩니다. 큐에 저장되어 있는 순서로 진행되며 '중지' 버튼을 클릭하면 진행 중인 애니메이션을 중단합니다. 다시 '시작' 버튼을 클릭하면 진행을 이어갑니다. 대기열의 모든 진행을 제거하려면 .clearQueue() 를 사용합니다.

<script>
$(function(){
 var tg = $("#use");

 $("#start").click(function(){
  tg.animate({height: '100'}, 'slow')
  tg.animate({width: '100'}, 'slow')
  tg.animate({height: '200'}, 'slow')
  tg.animate({width: '200'}, 'slow');
  });

  $("#stop").click(function(){
    tg.stop(); 
 });
});
</script>

<button id="start">시작</button>
<button id="stop">중지</button>

<div id="use" style="border: 1px solid; 
 width: 100px; height: 100px;
 background: #9c9;">안녕 하보니</div>

.finish()

현재 실행 중인 애니메이션과 대기 중인 애니메이션 모두 중지하고 완료된 상태로 보여줍니다.

<script>
$(function(){
 var tg = $("#use");

 $("#start").click(function(){
  tg.animate({height: '100'}, 'slow')
  tg.animate({width: '100'}, 'slow')
  tg.animate({height: '200'}, 'slow')
  tg.animate({width: '200'}, 'slow');
  });

  $("#finish").click(function(){
    tg.finish(); 
 });
});
</script>

<button id="start">시작</button>
<button id="finish">완료</button>

<div id="use" style="border: 1px solid;
  width: 100px;
  height: 100px;
  background: #9c9;">안녕 하보니</div>