1 분 소요

제이쿼리 .delay(), .stop(), .finish() 메소드를 사용하면 이펙트 애니메이션의 지연, 중단, 종료를 세밀하게 제어할 수 있습니다. 다양한 예제와 함께 그 사용법

1. .delay() – 애니메이션 사이 지연

설명

  • 애니메이션 체인 사이에 지연 시간을 설정할 수 있는 메소드입니다.
  • 단위는 밀리초(ms).
$("#startBtn").on("click", function() {
  $("#divBox")
    .fadeOut(500)      // 0.5초 동안 사라짐
    .delay(1000)       // 1초 대기
    .fadeIn(2000);     // 2초 동안 다시 나타남
});
  • delay()는 .fadeIn()이나 .slideUp() 같은 이펙트 메소드와 함께 사용됩니다.

2. .stop() – 실행 중인 이펙트 중단

기본 사용

  • 현재 실행 중인 애니메이션을 즉시 중단시킵니다.
  • 중단된 위치에서 멈추며, 큐(queue)는 유지됨.
$("#stopBtn").on("click", function() {
  $("#divBox").stop(); // 현재 실행 중인 애니메이션만 멈춤
});

옵션 사용

$("#stopBtn").on("click", function() {
  $("#divBox").stop(true, true);
  // (1) true: 대기 중인 큐 제거
  // (2) true: 애니메이션을 종료 상태로 강제 설정
});

3. .finish() – 효과 완전 종료

설명

  • 현재 실행 중인 이펙트뿐 아니라 대기 중인 애니메이션까지 제거하여 즉시 종료 상태로 만듭니다.
$("#finishBtn").on("click", function() {
  $("#divBox").finish(); // 모든 큐와 효과 즉시 종료
});
  • .stop(true, true)와 비슷하지만, 모든 큐까지 제거되는 점에서 차이가 있습니다.

4. 이펙트 제어 메소드 요약

메소드 설명
.delay() 이펙트 효과 사이에 지연 시간 추가
.stop() 현재 실행 중인 애니메이션만 중지
.stop(true) 실행 중 + 대기 중 큐 제거 (완전 중지)
.stop(true, true) 큐 제거 + 애니메이션 종료 상태로 이동
.finish() 실행 중 + 대기 중 큐 모두 종료 및 애니메이션 완료

5. 활용 예제

사용자 입력에 따라 지연 + 속도 제어

$("#applyEffect").on("click", function() {
  const speed = parseInt($("#speedInput").val());
  const delay = parseInt($("#delayInput").val());

  if (!isNaN(speed) && !isNaN(delay)) {
    $("#divBox").fadeOut(speed).delay(delay).fadeIn(speed);
  } else {
    alert("숫자를 입력하세요!");
  }
});

대기 중인 애니메이션 정리

$("#startAnimation").on("click", function() {
  $("#box1").slideUp(1000).slideDown(1000);
  $("#box2").slideUp(1000).slideDown(1000);
});

$("#clearQueue").on("click", function() {
  $("#box1, #box2").stop(true); // 큐 제거하고 즉시 중지
});

6. 콜백 함수 활용

이펙트가 멈췄을 때 사용자에게 알림 메시지를 제공

$("#stopBtn").on("click", function() {
  $("#divBox").stop();
  alert("이펙트 효과가 중지되었습니다!");
});
  • 콜백은 .fadeOut(), .slideUp() 등 이펙트 종료 후 동작으로도 사용 가능

7. 활용 팁

  1. delay()는 메소드 체인 중간에만 사용
    • .fadeOut().delay().fadeIn() 형태로 자연스러운 흐름 구현
  2. .stop() vs .finish()
    • .stop(): 현재 동작 중인 것만 멈춤, 큐는 유지됨
    • .finish(): 현재 실행 중 + 대기 큐까지 모두 제거하고 종료 상태로 이동
  3. 동적 제어를 위한 입력 요소 활용
    • 버튼, 슬라이더, 텍스트 입력 등을 조합하면 사용자 맞춤형 인터페이스 구현 가능

질문 정리

.stop()과 .finish()는 무슨 차이가 있나요?

→ .stop()은 현재 애니메이션만 멈추고, .finish()는 대기 중 큐까지 모두 종료합니다.

.delay()는 단독으로 사용할 수 있나요?

→ 아니요, .fadeIn(), .slideUp() 등 체인 안에서만 의미가 있습니다.

슬라이드와 페이드가 동시에 실행될 때도 제어할 수 있나요?

→ 가능합니다. 각 이펙트는 개별적으로 .stop(), .finish()로 제어할 수 있습니다.

카테고리:

업데이트:

댓글남기기

참고