jQuery 숨김 효과 — show, hide, toggle 완전 정리

 

 

Web Development · jQuery

jQuery 숨김 효과 —
show · hide · toggle 완전 정리

3가지 메서드로 요소를 보이고 숨기기

시작 오늘 분석할 코드

버튼 3개로 같은 input에 대해 숨기기 / 보이기 / 토글을 시연한다. 인자로 ms를 주면 그 시간 동안 부드러운 애니메이션이 일어난다.

$('#hide').click(function() { $('input[name="text1"]').hide(600); }); $('#show').click(function() { $('input[name="text1"]').show(1000); }); $('#toggle').click(function() { $('input[name="text1"]').toggle(2000); });

실제 출력 미리보기

show/hide/toggle 효과

---

용어 핵심 키워드

.hide(ms)서서히 사라짐 — display: none까지

.show(ms)서서히 나타남 — display 복원

.toggle(ms)현재 상태의 반대로 전환

ms 인자애니메이션 지속시간 (밀리초)

생략 시즉시 — 애니메이션 없음

[name="..."]속성 선택자 — name 값으로 매칭

---

1 어떻게 동작하는가

세 메서드는 모두 너비·높이·투명도를 동시에 줄이거나 늘려 사라지고 나타나게 만든다. 마지막엔 display: none / 원래 display로 바뀐다.

hide(600) — 600ms 동안 ↓ → 0 → display: none

show(1000) — display 복원 → 0 → ↑ 1000ms

toggle(2000) — 현재 상태 보고 → 반대로 2000ms 애니메이션

⚙ display vs visibility — show/hide는 display: none(공간까지 사라짐)을 쓴다. visibility: hidden(공간은 남기고 안 보임)이 아니다.

---

2 ms 인자 — 속도 제어

인자로 밀리초(ms)를 주면 그 시간 동안 부드럽게 변한다.

• .hide() — 즉시 사라짐 (애니메이션 없음)
• .hide(400) — 400ms 동안 사라짐
• .hide('fast') — 200ms 단축형
• .hide('slow') — 600ms 단축형
• .hide(1000, callback) — 끝나면 콜백 실행

---

3 toggle — 똑똑한 전환

.toggle()은 현재 상태를 보고 반대로 동작한다.

• 지금 보이는 상태 → hide 동작
• 지금 숨겨진 상태 → show 동작

버튼 하나로 보이고/숨김을 번갈아 하고 싶을 때 가장 간단한 방법이다 — 별도 상태 변수를 둘 필요 없다.

---

 

반응형

 

4 속성 선택자 — [name="..."]

본 코드는 $('input[name="text1"]')로 input을 찾는다. 이건 속성 선택자로 name 속성이 "text1"인 input을 매칭한다.

선택자	의미
[name="text1"]	name이 정확히 text1
[name^="te"]	name이 "te"로 시작
[name$="1"]	name이 "1"로 끝
[name*="ext"]	name에 "ext" 포함
[disabled]	disabled 속성을 가진 모든 요소

---

5 콜백 — 끝났을 때 실행

$('#box').hide(600, function() { // hide 끝나면 실행 alert('사라졌습니다.'); });

여러 애니메이션을 차례로 연결할 때 콜백이 핵심이다. fadeOut → fadeIn처럼 두 효과를 잇는 패턴에서 자주 쓴다.

---

6 비슷한 효과 메서드 비교

메서드	효과
show / hide	너비·높이·투명도 동시 변화
fadeIn / fadeOut	투명도만 변화 (크기 그대로)
slideDown / slideUp	높이만 변화 (위→아래 펼치기)
animate({...})	커스텀 — 임의 CSS 속성을 변화

---

7 자주 하는 실수

실수	증상	해결
처음부터 display:none인 요소에 hide()	아무 일 없음	show()로 시작 또는 toggle
이벤트 핸들러를 ready 밖에서	요소 못 찾음	$(document).ready 안에서
같은 요소에 빠르게 hide-show 반복	애니메이션이 큐에 쌓여 늦게 끝남	.stop().show()
toggle에 두 함수 인자	jQuery 1.9+에선 deprecated (이벤트 토글용)	현재 .toggle은 visibility 토글만

---

8 현대식 — CSS만으로

오늘날엔 transition·opacity·height를 쓴 CSS만으로 같은 효과가 가능하다. JS는 클래스 토글만.

/* CSS */ .box { opacity: 1; transition: opacity 600ms, height 600ms; } .box.hidden { opacity: 0; height: 0; overflow: hidden; } // JS document.querySelector('.box').classList.toggle('hidden');

---

핵심 한 줄 요약

.hide(ms)서서히 사라짐 + display:none

.show(ms)서서히 나타남 + display 복원

.toggle(ms)상태 반대로 전환

ms 단축형'fast'(200), 'slow'(600)

콜백.hide(600, fn) — 끝난 후 fn

[attr="val"]속성 선택자

Tags

#jQuery #show #hide #toggle #effect #콜백 #속성선택자 #애니메이션 #fast #slow #JS #자바스크립트 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery, show, hide, toggle, effect, 콜백, 속성선택자, 애니메이션, fast, slow, JS, 자바스크립트, CSS, HTML, 웹개발, 티스토리