08. 다양한 효과와 애니메이션

jQuery는 요소의 표시/숨김, 이동, 크기 반경 등을 간단한 메서드로 처리할 수 있도록 지원한다.

 

1. 효과 및 애니메이션 메서드

1) 효과 메서드

요소를 단순히 보이거나 숨기는 기능이다.

① show() / hide()

$("#box").hide();
$("#box").show();

시간 지정 가능

$("#box").hide(1000);

 

② toggle()

보이기/숨기기를 전환한다.

$("#box").toggle();

 

③ fade 효과

메서드	설명
fadeIn()	서서히 나타남
fadeOut()	서서히 사라짐
fadeToggle()	전환
fadeTo()	투명도 조절

$("#menu").slideToggle(500);

 

2) 애니메이션 메서드

① animate()

CSS 속성을 점진적으로 변경한다.

$("#box").animate({
  width: "200px",
  height: "200px",
  opacity: 0.5
}, 1000);

형식

.animate(속성, 시간, 가속도, 콜백 함수)

 

② 가속도 옵션

• "linear"
• "swing" (기본)

 

③ 콜백 함수

애니메이션 종료 후 실행된다.

$("#box").animate({left: "200px"}, 1000, function() {
  alert("완료");
});

 

2. 애니메이션 효과 제어 메서드

1) 애니메이션 효과 제어 메서드란?

실행 중인 애니메이션을 제어하는 기능이다.

 

① stop()

현재 실행 중인 애니메이션을 중지한다.

$("#box").stop();

옵션

.stop(애니메이션 큐 삭제, 현재 애니메이션 완료 여부)

ex.

.stop(true, true);

• true → 대기 중 애니메이션 제거
• true → 현재 애니메이션 즉시 완료

 

② delay()

애니메이션의 실행을 지연한다.

$("#box").delay(500).fadeOut();

 

③ finish()

대기 중인 애니메이션을 포함하여 즉시 종료한다.

$("#box").finish();

 

④ clearQueue()

대기열에 있는 애니메이션을 제거한다.

$("#box").clearQueue();