제이쿼리 기초 (3)

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();