jQuery 페이드 효과 — fadeOut, fadeIn, fadeToggle 완전 정리

 

 

Web Development · jQuery

jQuery 페이드 효과 —
fadeOut · fadeIn · fadeToggle

투명도만 부드럽게 변하는 효과 + 콜백 체인

시작 오늘 분석할 코드

두 이미지를 fadeOut → fadeIn 콜백 체인으로 자연스럽게 교차한다. img1이 사라지면서 img2가 나타나는 식. fadeToggle은 한 이미지를 토글한다.

$('#fadeOut').click(function() { $('#img1').fadeOut(2000, function() { $('#img2').fadeIn(100); }); }); $('#fadeIn').click(function() { $('#img2').fadeOut(2000, function() { $('#img1').fadeIn(100); }); }); $('#fadeToggle').click(function() { $('#img1').fadeToggle(1000); });

실제 출력 미리보기

fadeOut/fadeIn/fadeToggle 효과

img1 (보임)

img2 (40%투명)

---

용어 핵심 키워드

.fadeOut(ms)투명도 1→0 (점점 흐려짐) → display:none

.fadeIn(ms)display 복원 → 투명도 0→1

.fadeToggle(ms)현재 상태 반대로 페이드

콜백 (callback)애니메이션 끝난 직후 실행할 함수

크기 유지opacity만 변경 — 너비/높이는 그대로

display:none 처리완전히 사라지면 공간도 사라짐

---

1 show/hide와 무엇이 다른가

구분	show/hide	fadeIn/fadeOut
변하는 속성	너비·높이·opacity 동시	opacity만
크기	찌그러지듯 줄어듦	원래 크기 유지
인상	좀 거친 효과	부드럽고 차분
주 용도	패널·메뉴 펼침	이미지·알림 페이드

💡 이미지에는 fade가 자연 — 사진이 찌그러지면 어색하다. fadeOut/fadeIn은 크기 그대로 흐려지므로 더 깔끔하다.

---

2 콜백 체인 — 이미지 교차

본 코드의 핵심은 fadeOut의 두 번째 인자로 함수를 넘기는 것이다. 이 함수는 fadeOut이 완전히 끝난 직후 실행된다.

1) img1.fadeOut(2000) 시작 — 2초 동안 사라짐

2) 2초 후 img1이 완전히 안 보임 → 콜백 실행

3) 콜백: img2.fadeIn(100) — img2가 빠르게 나타남

결과 — img1 → img2로 부드럽게 교체

⚠ 왜 콜백이 필요? — fadeOut과 fadeIn을 한 줄씩 쓰면 둘이 같은 시간에 동시 시작한다. 이미지가 겹친 채로 어색하다. 콜백으로 순서를 만든다.

---

3 CSS의 #img2 { display: none; }

본 코드는 처음에 img2를 CSS로 숨겨둔다.

#img2 { display: none; }

이렇게 두면 페이지 로드 시 img1만 보인다. 버튼을 누르면 fadeIn(100)으로 빠르게 등장한다. 만약 둘 다 처음부터 보이게 두면 처음 화면에 두 이미지가 겹친다.

---

 

반응형

 

4 fadeTo() — 특정 투명도까지

fadeIn/fadeOut은 0과 1 사이만 다룬다. 중간 투명도(예: 50%)로 멈추고 싶으면 .fadeTo().

$('#box').fadeTo(1000, 0.3); // 1초 동안 투명도 0.3까지 $('#box').fadeTo('slow', 1.0); // 다시 완전 불투명

---

5 자주 하는 실수

실수	증상	해결
fadeOut → fadeIn 한 줄씩	두 이미지 동시 변화 → 겹침	콜백으로 순서 잡기
img2 처음부터 보이게 둠	로드 시 두 장 동시에 보임	CSS display: none
콜백 안에서 또 콜백 (지나친 중첩)	"콜백 지옥"	Promise/.queue() 또는 async
fadeOut 도중 다시 fadeIn 클릭	큐에 쌓여 늦게 끝남	.stop().fadeIn()
display:none 요소 fadeOut	아무 변화 없음	fadeIn으로 시작 또는 fadeToggle

---

6 .stop() — 진행 중인 애니메이션 중단

fadeOut이 절반 끝났을 때 새 fadeIn을 클릭하면 jQuery는 큐에 쌓아 차례대로 실행한다. 사용자에게는 응답이 느린 듯 보인다. .stop()으로 즉시 멈추고 새 효과를 시작할 수 있다.

$('#img1').stop().fadeIn(300); // 진행 중 애니 중단 후 fadeIn $('#img1').stop(true).fadeOut(300); // 큐도 비움

---

7 현대식 — CSS transition

/* CSS */ .img { opacity: 1; transition: opacity 2000ms; } .img.faded { opacity: 0; } // JS img1.classList.add('faded'); img1.addEventListener('transitionend', () => { img2.classList.remove('faded'); }, { once: true });

CSS transition은 GPU 가속이 들어가 더 부드럽고 가볍다. 모던 프로젝트에선 보통 이 방식을 쓴다.

---

핵심 한 줄 요약

.fadeOut(ms)opacity 1→0 + display:none

.fadeIn(ms)display 복원 + opacity 0→1

.fadeToggle(ms)상태 반대로 페이드

.fadeTo(ms, opacity)중간 투명도까지

콜백2번째 인자 — 끝난 후 실행

.stop()진행 중 애니 중단

크기 유지opacity만 변경 — 이미지에 적합

Tags

#jQuery #fadeOut #fadeIn #fadeToggle #fadeTo #opacity #stop #페이드 #콜백 #애니메이션 #JS #자바스크립트 #CSS #HTML #웹개발 #티스토리

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

jQuery, fadeOut, fadeIn, fadeToggle, fadeTo, opacity, stop, 페이드, 콜백, 애니메이션, JS, 자바스크립트, CSS, HTML, 웹개발, 티스토리