[jQuery] 효과(애니메이션) 메서드

1. 효과 메서드

효과 메서드란?

선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드.

기본형

$("요소 선택").효과메서드(효과 소요 시간, 가속도, 콜백함수);

효과 소요 시간

• 요소를 숨기거나 노출할 때 소요되는 시간임.
• "slow", "normal", "fast" 및 밀리초 단위로 설정가능.

가속도

• 숨기거나 노출하는 동안의 가속도를 설정함.
• "swing"과 "linear"을 이용하여 설정함.
• swing : 시작과 끝은 느리게, 중간은 빠른 속도로 움직임.(기본값)
• linear : 일정한 속도로 움직입니다.

콜백함수

• 노출과 숨김 효과가 끝난 후에 실행할 함수임.

1-1. 숨김 효과 메서드

• hide() 메서드
  요소를 숨깁니다.

  기본형

  $("요소 선택").hide();
  $("요소 선택").hide(효과 소요 시간, 가속도, 콜백함수);

• fadeOut() 메서드
  요소가 점점 투명해지면서 사라짐.

  기본형

  $("요소 선택").fadeOut();
  $("요소 선택").fadeOut(효과 소요 시간, 가속도, 콜백함수);

• slideUp() 메서드
  요소가 위로 접히며 숨겨짐.

  기본형

  $("요소 선택").slideup();
  $("요소 선택").slideup(효과 소요 시간, 가속도, 콜백함수);

1-2. 노출 효과 메서드

• show() 메서드
  숨겨진 요소가 노출됨.

  기본형

  $("요소 선택").show();
  $("요소 선택").show(효과 소요 시간, 가속도, 콜백함수);

• fadeIn() 메서드
  숨겨진 요소가 점점 선명해짐.

  기본형

  $("요소 선택").fadeIn();
  $("요소 선택").fadeIn(효과 소요 시간, 가속도, 콜백함수);

• slideDown() 메서드
  숨겨진 요소가 아래로 펼져짐.

  기본형

  $("요소 선택").slideDown();
  $("요소 선택").slideDown(효과 소요 시간, 가속도, 콜백함수);

1-3. 노출/숨김 효과 메서드

• toggle() 메서드
  hide(), show() 효과를 적용함.

  기본형

  $("요소 선택").toggle();
  $("요소 선택").toggle(효과 소요 시간);
  $("요소 선택").toggle(효과 소요 시간, 콜백함수);

• fadeToggle() 메서드
  fadeIn(), fadeOut() 효과를 적용함.

  기본형

  $("요소 선택").fadeToggle();
  $("요소 선택").fadeToggle(효과 소요 시간);
  $("요소 선택").fadeToggle(효과 소요 시간, 콜백함수);

• slideToggle() 메서드
  slideUp(), slideDown() 효과를 적용함.

  기본형

  $("요소 선택").slideToggle();
  $("요소 선택").slideToggle(효과 소요 시간);
  $("요소 선택").slideToggle(효과 소요 시간, 콜백함수);

• fadeTo()
  지정한 투명도를 적용함.

  기본형

  $("요소 선택").slideDown();
  $("요소 선택").slideDown(효과 소요 시간, 투명도, 콜백함수);

  투명도

  • 0 ~ 1까지의 값을 입력하여 투명도를 설정함. 1에 가까울수록 선명함.

1-4 애니메이션 메서드

• animate() 메서드
  선택한 요소에 다양한 동작 효과를 적용할 수 있음.

  기본형

  $("요소 선택").animate(스타일 속성, 적용 시간, 가속도, 콜백 함수);

  • 스타일 속성 : 애니메이션으로 적용할 스타일 속성

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

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

'효과' 또는 '애니메이션'이 적용된 요소의 동작을 제어하는 메서드입니다. 애니메이션 매서드는 적용되는 순서대로 큐라는 저장소에 저장이 됩니다. 이때 큐에 저장된 애니메이션을 제어함.

• 큐란?
  먼저 들어간 데이터가 먼저 처리되는 형식으로 FIFO(First In First Out)형식이라고도 부름.

• stop() 메서드
  요소에 적용한 애니메이션을 정지시킴.

  기본형

  $("요소 선택").stop(); // 진행 중인 애니메이션만 정지
  $("요소 선택").stop(clearQueue, finish);
  // 대기 중인 애니메이션은 제거, 진행 중인 애니메이션은 강제로 종료
  // clearQueue와 finish는 논리형 데이터로 들어감.

• delay() 메서드
  요소에 적용한 애니메이션을 지정한 시간만큼 지연시킴.

  기본형

  $("요소 선택").delay(지연시간).애니메이션효과메서드();

• queue() 메서드
  큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가함.

  기본형

  $("요소 선택").queue(); // 큐의 함수 반환
  $("요소 선택").queue(function() {자바스크립트 코드}); // 큐에 함수 추가

• dequeue() 메서드
  queue() 메서드 실행 이후에 적용된 애니메이션 메서드가 취소되지 않게 연결해 줌.

  기본형

  $("요소 선택").dequeue();

• clearQueue() 메서드
  진행 중인 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수를 제거함.

  기본형

  $("요소 선택").clearQueue();

• finish() 메서드
  선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸후 종료함.

  기본형

  $("요소 선택").finish();