[jQuery] 6. jQuery 효과

jQuery 효과

효과 구분	메서드	설명
Hide/Show	hide()	선택된 요소를 화면에서 보이지 않도록 감춤
	show()	선택된 요소를 숨겨진 상태에서 화면에 표시
	toggle()	hide()와 show()를 번갈아 수행
페이드	fadeIn()	감춰진 요소를 점차적으로 밝게 만들어서 화면에 표시
	fadeOut()	요소를 점차적으로 흐리게 만들어 화면에서 사라지게 함
	fadeToggle()	fadeIn()과 fadeOut()을 번갈아 수행
	fadeTo()	지정한 불투명도까지의 페이드아웃 효과를 부여
슬라이드	slideUp()	선택된 요소를 위쪽으로 밀어 올려 보이지 않도록 함
	slideDown()	감춰져 있던 요소를 아래쪽으로 밀어 내려서 화면에 표시
	slideToggle()	slideUp()과 slideDown()을 번갈아 수행
애니메이션	animate()	사용자가 원하는 애니메이션 효과를 지정

Hide/Show 효과

　▷ 선택한 요소를 화면에서 감추거나 보여 주는 효과

hide(), show() 메서드

toggle() 메서드

hide(속도, 콜백함수), show(속도, 콜백함수)

페이드 효과

　▷ 선택한 요소의 불투명도가 시간에 따라 변하면서 요소가 점차적으로 밝게 표시되거나 어둡게 표시되는 것

 

fadeIn(), fadeOut() 메서드

fadeToggle() 메서드

fadeTo() 메서드

슬라이드 효과

　▷ 선택한 요소를 위쪽이나 아래쪽으로 밀어내는 효과

　　　$(선택자).slideUp(속도, 콜백함수)

　　　$(선택자).slideDown(속도, 콜백함수)

　　　$(선택자).slideToggle(속도, 콜백함수)

slideUp(), slideDown(), slideToggle()

애니메이션 효과

　▷ 사용자가 원하는 애니메이션을 직접 지정하는 경우

animate() 메서드