[Do it!] 08. 효과와 애니메이션 [1.효과 및 애니메이션 메서드]

효과(Effect) 메서드를 이용하면 스타일(CSS)을 이용하는 것보다 좀 더 역동적으로

동작을 조절하여 객체를 화려하게 숨기거나 보이게 만들 수 있음

애니메이션 메서드까지 사용하면 선택한 요소에 다양한 동작까지 적용할 수 있음

 

효과 메서드

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

 

효과 메서드 종류

구분	종류	설명
숨김	hide()	요소 숨김
	fadeOut()	요소가 투명해지며 사라짐
	slideUp()	요소가 위로 접히며 숨겨짐
노출	show()	숨겨진 요소가 노출
	fadeIn()	숨겨진 요소가 점점 선명해짐
	slideDown()	숨겨진 요소가 아래로 펼쳐짐
노출, 숨김	toggle()	hide(), show() 효과 적용
	fadeToggle()	fadeIn(), fadeOut() 효과 적용
	slideToggle()	slideUp(), slideDown() 효과 적용
	fadeTo()	지정한 투명도를 적용

 

효과 메서드의 기본형

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

1) 효과시간 : 요소를 숨기거나 노출할 때 소요되는 시간

- 방법1 : 'slow', 'normal', 'fast'

- 방법2 : 1000(1초), 500(0.5초)

2) 가속도 : 숨기거나 노출하는 동안의 가속도를 설정

- 방법1 : 'swing' (시작과 끝은 느리게, 중간은 빠른 속도로)

- 방법2 : 'linear' (일정한 속도로 움직임)

3) 콜백 함수 : 노출과 숨김 효과가 끝난 후에 실행할 함수. 생략 가능

 

fadeTo() 메서드

$("요소").fadeTo(효과소요시간, 투명도, 콜백함수)

1) 투명도 : 0 ~ 1까지의 값 입력할 수 있음. 1에 가까울수록 선명하게 보임

---

동작을 불어넣는 애니메이션 메서드

스타일을 적용한 요소를 움직이게 할 수 있음

 

animate() 메서드

선택한 요소에 다양한 동작(Motion) 효과를 적용할 수 있음

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

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

2) 적용시간 : 동작에 반응하는데 소요되는 시간. 적용시간의 옵션은 위의 효과 함수에 적용한 것과 같음