효과 및 애니메이션 메서드

* 효과 및 애니메이션 메서드

- 문서 객체를 보이게 했다가 숨기려면 스타일(CSS)에 display 속성을 사용해야 함.

- 스타일을 이용하면 객체는 단순히 보였다가 숨겨짐.

- 하지만 효과(Effect) 메서드를 사용하면 스타일(CSS)을 사용하는 것보다 좀 더 역동적인 동작을 적용하여 객체를 화려하게 숨기거나 보이게 만들 수 있음.

- 효과에 애니메이션 메서드까지 사용하면 선택한 요소에 다양한 동작(Motion)을 적용시킬 수 있음

 

* 효과 메서드

- 효과(Effect) 메서드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드, 선택한 요소에 동작을 적용시킬 수 있는 애니메이션 메서드가 있음.

- 효과 메서드의 종류

종류	풀이
hide()	노출되어 있는 요소를 숨김.
show()	숨겨져 있던 요소를 노출시킴.
toggle()	숨겨져 있던 요소는 노출시키고, 노출되어 있던 요소는 숨김.
fadeIn()	숨겨져 있던 요소가 점점 선명해지면서 노출됨.
fadeOut()	노출되어 있던 요소가 점점 투명해지면서 숨겨짐.
fadeToggle()	노출되어 있던 요소는 점점 투명해지며 사라지고, 사라져 있던 요소는 선명해지면서 노출됨.
fadeTo()	노출되어 있던 요소에 투명도를 지정한 만큼 숨김.
slideDown()	숨겨져 있던 요소가 밑으로 펼쳐지며 노출됨.
slideUp()	노출되어 있던 요소를 위로 접으며 숨김.
slideToggle()	숨겨져 있던 요소는 아래로 펼쳐지며 노출되고, 노출되어 있던 요소는 위로 접으면서 숨김.
animate()	선택한 요소에 애니메이션을 적용함.

 

 

(1) hide() / show() 메서드

- hide() 메서드는 선택한 요소를 숨길 때 사용함.

- show() 메서드는 선택한 요소가 숨겨져 있을 경우 노출시킴.

- 기본형

1. $(요소 선택).hide("효과 속도", 콜백 함수);  2. $(요소 선택).show("효과 속도", 콜백 함수);

 

- 효과 속도는 숨기거나 노출시킬 때 바뀌는 속도를 가리킴.

- 속도값으로는 "fast", "normal", "slow" 또는 1/1000초 단위인 밀리초(msc)로 입력할 수 있음.

- 콜백 함수 : 효과가 모두 완료되면 실행되는 함수. 생략 가능.

 

 

(2) toggle() 메서드

- 선택한 요소가 보이면 숨기고, 숨겨져 있으면 나타나도록 만드는 메서드.

- hide() 메서드와 show() 메서드의 기능을 모두 가지고 있음.

- show(), hide() 메서드와 사용법이 비슷함.

- 기본형

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

 

 

(3) fadeOut() / fadeIn() / fadeToggle() 메서드

- fadeOut() 메서드는 선택한 요소를 숨길 때 사용함.

- fadeIn() 메서드는 선택한 요소가 만일 숨겨져 있었다면 다시 나타나게 함.

- fadeToggle() 메서드는 선택한 요소가 보이면 숨기고, 숨겨져 있으면 나타나게 함.

- 이 세 가지 효과 메서드는 요소를 숨길 때는 요소를 점점 투명해지게 만들어 숨기고, 반대로 노출할 때는 투명했던 요소를 점점 선명하게 나타나도록 함.

- 기본형

1. $(요소 선택).fadeOut("효과 속도", 콜백 함수);    // 투명해지며 숨김.  // 선택한 요소를 효과 속도에 맞춰 점차 투명하게 만들어 숨기고, 완료되면 콜백 함수의 실행문을 실행. 콜백 함수 생략 가능.  2. $(요소 선택).fadeIn("효과 속도", 콜백 함수);    // 선명해지며 노출됨.  // 선택한 요소가 숨겨져 있으면 효과 속도에 맞춰 나타나도록 하고, 노출이 완료되면 콜백 함수의 실행문을 실행. 콜백 함수 생략 가능.  3. $(요소 선택).fadeToggle("효과 속도", 콜백 함수);  // 투명 효과로 숨기거나 노출됨.  // 선택한 요소가 만일 노출되어 있을 경우에는 요소를 숨기고, 숨겨져 있으면 보이게 만듦. 숨김 또는 노출 효과가 완료되면 콜백 함수의 실행문이 실행됨.

 

 

(4) fadeTo() 메서드

- 선택한 요소를 지정한 투명도의 값까지만 숨김.

- 투명도는 0부터 1까지 입력할 수 있으며, 숫자가 1에 가까울수록 선명하게 보임. 예) 50% 투명도 적용 : 0.5 입력

- 기본형

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

 

 

(5) slideUp() / slideDown() / slideToggle() 메서드

- slideUp() 메서드는 선택한 요소를 숨길 때 사용.

- slideDown() 메서드는 선택한 요소가 숨겨져 있으면 다시 나타나게 함.

- slideToggle() 메서드는 선택한 요소가 보이면 숨기고, 숨겨져 있으면 나타나게 만듦.

- 이 메서드들은 요소를 숨길 때는 위로 점차 접히며 숨겨지게 하고, 드러낼 때는 반대로 점차 아래로 펼쳐지게 하며 노출시킴.

- 기본형

1. $(요소 선택).slideUp("효과 속도", 콜백 함수); // 선택한 요소가 효과 속도에 맞춰 위로 점차 접히며 숨겨지며, 완전히 숨겨진 후에는 콜백 함수의 실행문을 실행함. 콜백 함수 생략 가능.  2. $(요소 선택).slideDown("효과 속도", 콜백 함수); // 선택한 요소가 효과 속도에 맞춰 아래로 점차 펼쳐지며 나타나며, 완전히 노출한 후에는 콜백 함수의 실행문을 실행함. 콜백 함수 생략 가능.  3. $(요소 선택).slideToggle("효과 속도", 콜백 함수); // 선택한 요소가 현재 보이는 상태이면 위로 점차 접히며 숨겨지고, 숨겨져 있으면 아래로 점차 펼쳐지며 나타남. 숨김 또는 노출이 완전히 완료되면 콜백 함수의 실행문을 실행함. 콜백 함수 생략 가능.

 

 

(6) animate() 메서드

- 선택한 요소에 다양한 동작(Motion) 효과를 적용함.

- 기본형

$(요소 선택).animate( {애니메이션 속성}, "효과 속도", 콜백 함수 );

-> 애니메이션 속성에는 모션으로 적용할 속성을 스타일(CSS)을 이용해 입력함.

-> 효과 속도는 동작 속도를 가리키며, 값으로는 'slow', 'normal', 'fast' 또는 밀리초(msc)로 입력함.

-> 콜백 함수는 동작이 완료되면 실행되는 함수.

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)