jQuery 입문 | 이펙트(effect) 효과 | 이펙트 효과의 제어 .delay() .stop() .finish()

이펙트 효과의 제어

jQuery에서는 다음 메소드를 사용하여 사용자가 직접 이펙트 효과를 제어할 수 있다.

이펙트 효과의 지연 시간 설정

.delay() 메소드는 실행 중인 큐(Queue) 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정한다.

다음 예제는 페이드 아웃 효과와 페이드 인 효과 사이에 1초의 지연시간을 설정하는 예제이다.

아래와 같이 HTML 요소가 있을 때,

<p><button>실행</button></p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

아래와 같이 실행 버튼을 누르면 사각형이 사라졌다가 id가 “first"인 요소는 지연 시간이 없고, “second"인 요소는 0.5초, “third"는 1초의 지연 시간을 가졌다가 다시 표시된다.

$("button").on("click", function() {
  $("div.first").slideUp(300).fadeIn(400);
  $("div.second").slideUp(300).delay(500).fadeIn(400);
  $("div.third").slideUp(300).delay(1000).fadeIn(400);
});

코드 실행

이펙트 효과의 중지

.stop() 메소드는 선택한 요소에서 실행 중인 모든 이펙트 효과를 일시적으로 중지시킨다.

아래 예제는 시작 버튼을 누르면 크기가 점점 커지다가, 중시 버튼을 누르면 일시 중지된다.

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});
$("button#stop").on("click", function() {
  $("div").stop();
});

코드 실행

이펙트 효과의 종료

.finish() 메소드는 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킨다.

아래 예제는 시작 버튼을 누르면 크기가 점점 커지다가, 종료 버튼을 누르면 효과가 종료된다.

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});
$("button#finish").on("click", function() {
  $("div").finish();
});

코드 실행

.delay()와 .finish()의 차이점

.stop() 메소드와 .finish() 메소드는 실행 중인 이펙트 효과를 멈춘다는 점이 동일하다.
차이점은 .stop() 메소드는 일시적으로 중지를 시키는 반면에 .finish() 메소드는 중지가 아닌 아예 종료시킨다는 점이 다르다. 즉, .stop() 메소드로 중지를 시키면 다시 재개할 수 있지만 .finish() 메소드는 다시 재개할 수 없고 처음부터 다시 실행을 시켜야 한다.