2026.03.12

[jQuery 기초] show(), hide(), fadeIn(), fadeOut(), slideUp(), slideDown()

jQuery에서 show(), hide(), fadeIn(), fadeOut(), slideUp(), slideDown() 메서드를 사용하여 요소를 나타내거나 숨기는 시각 효과를 구현하는 방법을 정리합니다.

fadein

fadeout

hide

jquery

show

slidedown

slideup

웹퍼블리싱

jQuery 시각 효과 🎭

jQuery에서는 요소를 나타내거나 숨기는 다양한 시각 효과를 제공합니다.

대표적인 메서드는 다음과 같습니다.

code

show()
hide()
fadeIn()
fadeOut()
slideUp()
slideDown()

이 메서드를 사용하면 애니메이션 없이 또는 간단한 애니메이션과 함께 요소의 표시 상태를 변경할 수 있습니다.

주요 포인트 Top3

# show / hide는 요소 표시 상태를 변경합니다

요소를 나타내거나 숨길 수 있습니다.

# fade는 투명도 애니메이션입니다

서서히 나타나거나 사라지는 효과를 만듭니다.

# slide는 높이 애니메이션입니다

위아래로 열리고 닫히는 효과를 만듭니다.

01. show() 메서드 👁

show()는 숨겨진 요소를 나타내는 메서드입니다.

예) 💡

javascript

$(".box").show()

설명

code

숨겨진 요소 표시

속도 적용

javascript

$(".box").show(500)

설명

code

0.5초 동안 나타남

02. hide() 메서드 🙈

hide()는 요소를 숨기는 메서드입니다.

예) 💡

javascript

$(".box").hide()

설명

code

요소 숨김

속도 적용

javascript

$(".box").hide(500)

설명

code

0.5초 동안 사라짐

📌 Tip. show / hide 원리

show와 hide는 내부적으로

code

display:none
display:block

을 변경합니다.

03. fadeIn() 메서드 🌫

fadeIn()은 서서히 나타나는 효과를 만듭니다.

예) 💡

javascript

$(".box").fadeIn()

설명

code

투명도 0 → 1

속도 적용

javascript

$(".box").fadeIn(1000)

설명

code

1초 동안 나타남

04. fadeOut() 메서드 🌫

fadeOut()은 서서히 사라지는 효과를 만듭니다.

예) 💡

javascript

$(".box").fadeOut()

설명

code

투명도 1 → 0

속도 적용

javascript

$(".box").fadeOut(1000)

설명

code

1초 동안 사라짐

05. slideDown() 메서드 ⬇

slideDown()은 위에서 아래로 열리는 효과를 만듭니다.

예) 💡

javascript

$(".menu").slideDown()

설명

code

숨겨진 메뉴 열기

속도 적용

javascript

$(".menu").slideDown(500)

설명

code

0.5초 동안 열림

06. slideUp() 메서드 ⬆

slideUp()은 아래에서 위로 닫히는 효과를 만듭니다.

예) 💡

javascript

$(".menu").slideUp()

설명

code

메뉴 닫기

속도 적용

javascript

$(".menu").slideUp(500)

설명

code

0.5초 동안 닫힘

GOYO.’s Tip 💡

jQuery 시각 효과는 UI 인터랙션에서 자주 사용됩니다.

대표적인 예

code

드롭다운 메뉴
아코디언 메뉴
이미지 갤러리
알림 메시지

특히 slideDown / slideUp은
메뉴 인터랙션에서 매우 많이 사용됩니다.

마무리

이번 글에서는 jQuery에서 요소를 나타내거나 숨기는

code

show()
hide()
fadeIn()
fadeOut()
slideUp()
slideDown()

메서드를 정리했습니다.

이 메서드를 사용하면
JavaScript로 간단한 시각 효과를 쉽게 구현할 수 있습니다.

목록으로 가기

이전 클래스[jQuery 기초] find(), parent(), children()다음 클래스[jQuery 기초] scroll 이벤트 / scrollTop() / offset().top

다음 클래스

jquery