[jQuery] 10. fadeIn(), fadeOut(), fadeToggle() 사용법

지난 글에서는 jQuery의 show(), hide(), toggle()을 사용해서 HTML 요소를 보이거나 숨기는 방법을 알아봤습니다.

이번 글에서는 요소가 부드럽게 나타나거나 사라지도록 만드는 fadeIn(), fadeOut(), fadeToggle()에 대해 알아보겠습니다.

fade 효과는 알림창, 안내 박스, 이미지, 카드 UI 등을 자연스럽게 보여줄 때 자주 사용됩니다.

1. fade 효과란?

fade 효과는 요소의 투명도를 조절해서 서서히 나타나거나 서서히 사라지게 만드는 효과입니다.

fadeIn() : 숨겨진 요소가 서서히 나타납니다.
fadeOut() : 보이는 요소가 서서히 사라집니다.
fadeToggle() : 보이면 서서히 사라지고, 숨겨져 있으면 서서히 나타납니다.
fadeTo() : 지정한 투명도까지 서서히 변경합니다.

show(), hide(), toggle()이 표시 상태를 바꾸는 기본 기능이라면, fade 계열 메서드는 여기에 부드러운 투명도 변화 효과를 더한 기능이라고 보면 됩니다.

2. fadeOut()으로 요소 서서히 숨기기

fadeOut()은 현재 보이는 요소를 서서히 사라지게 할 때 사용합니다.

📌 기본 문법

$("선택자").fadeOut();

📌 예제 코드

<p id="message">이 문장은 서서히 사라집니다.</p>

<button id="fadeOutBtn">사라지기</button>

<script>
  $("#fadeOutBtn").click(function() {
    $("#message").fadeOut();
  });
</script>

📌 실행 결과

처음에는 문장이 화면에 표시됩니다.
사라지기 버튼을 클릭합니다.
문장이 서서히 투명해지면서 사라집니다.

3. fadeIn()으로 요소 서서히 보이기

fadeIn()은 숨겨져 있는 요소를 서서히 나타나게 할 때 사용합니다.

📌 기본 문법

$("선택자").fadeIn();

📌 예제 코드

<p id="message" style="display:none;">숨겨져 있던 문장입니다.</p>

<button id="fadeInBtn">나타나기</button>

<script>
  $("#fadeInBtn").click(function() {
    $("#message").fadeIn();
  });
</script>

📌 실행 결과

처음에는 문장이 보이지 않습니다.
나타나기 버튼을 클릭합니다.
숨겨져 있던 문장이 서서히 나타납니다.

4. fadeIn()과 fadeOut() 함께 사용하기

보이기 버튼과 숨기기 버튼을 따로 만들어서 fade 효과를 제어할 수 있습니다.

📌 예제 코드

<div id="box" style="width:240px; padding:20px; background:royalblue; color:white; border-radius:8px;">
  fade 효과가 적용될 박스입니다.
</div>

<br>

<button id="fadeInBtn">보이기</button>
<button id="fadeOutBtn">숨기기</button>

<script>
  $("#fadeInBtn").click(function() {
    $("#box").fadeIn();
  });

  $("#fadeOutBtn").click(function() {
    $("#box").fadeOut();
  });
</script>

📌 실행 결과

숨기기 버튼을 클릭하면 박스가 서서히 사라집니다.
보이기 버튼을 클릭하면 박스가 서서히 나타납니다.

5. 속도 지정하기

fadeIn(), fadeOut(), fadeToggle()에는 속도를 지정할 수 있습니다.

숫자를 넣으면 해당 시간 동안 애니메이션이 실행됩니다. 단위는 밀리초입니다.

📌 예제 코드

$("#box").fadeOut(500);
$("#box").fadeIn(1000);

500 : 0.5초 동안 실행됩니다.
1000 : 1초 동안 실행됩니다.

속도는 숫자 외에도 "slow", "fast"를 사용할 수 있습니다.

$("#box").fadeOut("slow");
$("#box").fadeIn("fast");

6. fadeToggle()이란?

fadeToggle()은 요소가 보이면 서서히 사라지게 하고, 숨겨져 있으면 서서히 나타나게 하는 메서드입니다.

하나의 버튼으로 fadeIn()과 fadeOut()을 번갈아 실행하고 싶을 때 사용합니다.

📌 기본 문법

$("선택자").fadeToggle();

7. fadeToggle() 기본 예제

버튼을 클릭할 때마다 박스가 서서히 나타나거나 사라지는 예제를 만들어보겠습니다.

📌 예제 코드

<div id="box" style="width:240px; padding:20px; background:seagreen; color:white; border-radius:8px;">
  버튼을 누를 때마다 나타나거나 사라집니다.
</div>

<br>

<button id="toggleBtn">fade 토글</button>

<script>
  $("#toggleBtn").click(function() {
    $("#box").fadeToggle(500);
  });
</script>

📌 실행 결과

처음에는 박스가 화면에 표시됩니다.
fade 토글 버튼을 한 번 클릭하면 박스가 서서히 사라집니다.
버튼을 다시 클릭하면 박스가 서서히 나타납니다.

8. fadeTo()로 투명도 조절하기

fadeTo()는 요소를 완전히 숨기는 것이 아니라, 원하는 투명도까지 서서히 변경하는 메서드입니다.

기본 문법은 다음과 같습니다.

$("선택자").fadeTo(속도, 투명도);

투명도는 0부터 1 사이의 값을 사용합니다.

0 : 완전히 투명합니다.
0.5 : 절반 정도 투명합니다.
1 : 완전히 보입니다.

📌 예제 코드

<div id="box" style="width:240px; padding:20px; background:orange; border-radius:8px;">
  투명도가 변경될 박스입니다.
</div>

<br>

<button id="fadeToBtn">투명도 변경</button>

<script>
  $("#fadeToBtn").click(function() {
    $("#box").fadeTo(500, 0.4);
  });
</script>

📌 실행 결과

버튼을 클릭하면 박스가 0.5초 동안 서서히 투명해집니다.
박스는 완전히 사라지지 않고 40% 정도 보이는 상태가 됩니다.

9. 알림 박스 서서히 보여주기

fadeIn()은 알림 메시지를 자연스럽게 보여줄 때 자주 사용됩니다.

📌 예제 코드

<button id="noticeBtn">알림 보기</button>

<div id="notice" style="display:none; margin-top:10px; padding:15px; background:#e8f3ff; border:1px solid #99c8ff; border-radius:8px;">
  저장이 완료되었습니다.
</div>

<script>
  $("#noticeBtn").click(function() {
    $("#notice").fadeIn(500);
  });
</script>

📌 실행 결과

처음에는 알림 박스가 보이지 않습니다.
알림 보기 버튼을 클릭합니다.
"저장이 완료되었습니다." 문구가 서서히 나타납니다.

10. 알림 박스 자동으로 사라지게 하기

fadeIn()과 fadeOut()을 함께 사용하면 알림을 보여준 뒤 자동으로 사라지게 만들 수 있습니다.

이때는 delay()를 함께 사용할 수 있습니다.

📌 예제 코드

<button id="saveBtn">저장하기</button>

<div id="notice" style="display:none; margin-top:10px; padding:15px; background:#e8f3ff; border:1px solid #99c8ff; border-radius:8px;">
  저장이 완료되었습니다.
</div>

<script>
  $("#saveBtn").click(function() {
    $("#notice").fadeIn(500).delay(1500).fadeOut(500);
  });
</script>

📌 실행 결과

저장하기 버튼을 클릭합니다.
알림 박스가 0.5초 동안 서서히 나타납니다.
1.5초 동안 화면에 유지됩니다.
다시 0.5초 동안 서서히 사라집니다.

11. 이미지에 fade 효과 적용하기

fade 효과는 이미지에도 사용할 수 있습니다.

이미지 갤러리, 배너, 카드 이미지 등을 자연스럽게 보여줄 때 유용합니다.

📌 예제 코드

<img id="photo" src="sample.jpg" alt="예시 이미지" width="250">

<br><br>

<button id="photoBtn">이미지 숨기기 / 보이기</button>

<script>
  $("#photoBtn").click(function() {
    $("#photo").fadeToggle(600);
  });
</script>

📌 실행 결과

처음에는 이미지가 화면에 표시됩니다.
버튼을 클릭하면 이미지가 서서히 사라집니다.
버튼을 다시 클릭하면 이미지가 서서히 나타납니다.

12. callback 사용하기

fade 효과가 끝난 뒤 특정 코드를 실행하고 싶을 때는 callback 함수를 사용할 수 있습니다.

callback은 애니메이션이 끝난 다음 실행되는 함수입니다.

📌 예제 코드

<div id="box" style="width:240px; padding:20px; background:#eeeeee; border-radius:8px;">
  사라진 뒤 알림창이 뜹니다.
</div>

<br>

<button id="btn">사라지기</button>

<script>
  $("#btn").click(function() {
    $("#box").fadeOut(500, function() {
      alert("박스가 완전히 사라졌습니다.");
    });
  });
</script>

📌 실행 결과

버튼을 클릭하면 박스가 서서히 사라집니다.
박스가 완전히 사라진 뒤 alert 창이 표시됩니다.

13. 전체 예제

이번에는 fadeIn(), fadeOut(), fadeToggle(), fadeTo()를 모두 사용한 전체 예제를 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery fade 효과</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    #box {
      width: 260px;
      padding: 20px;
      background: royalblue;
      color: white;
      border-radius: 8px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <h2>jQuery fade 효과 공부</h2>

  <div id="box">
    fade 효과가 적용될 박스입니다.
  </div>

  <button id="fadeInBtn">fadeIn</button>
  <button id="fadeOutBtn">fadeOut</button>
  <button id="fadeToggleBtn">fadeToggle</button>
  <button id="fadeToBtn">fadeTo</button>

  <script>
    $(function() {
      $("#fadeInBtn").click(function() {
        $("#box").fadeIn(500);
      });

      $("#fadeOutBtn").click(function() {
        $("#box").fadeOut(500);
      });

      $("#fadeToggleBtn").click(function() {
        $("#box").fadeToggle(500);
      });

      $("#fadeToBtn").click(function() {
        $("#box").fadeTo(500, 0.4);
      });
    });
  </script>

</body>
</html>

📌 실행 결과

fadeIn 버튼을 클릭하면 박스가 서서히 나타납니다.
fadeOut 버튼을 클릭하면 박스가 서서히 사라집니다.
fadeToggle 버튼을 클릭하면 박스가 보이거나 숨겨집니다.
fadeTo 버튼을 클릭하면 박스가 40% 투명도로 변경됩니다.

14. 자주 하는 실수

📌 1. 처음부터 숨겨야 하는 요소에 display:none을 안 쓰는 경우

fadeIn()은 숨겨져 있는 요소를 나타나게 하는 메서드입니다. 처음부터 안 보이다가 나타나게 하려면 display:none을 적용해야 합니다.

<div id="box" style="display:none;">
  처음에는 숨겨진 박스입니다.
</div>

📌 2. fadeTo()의 투명도 값을 잘못 쓰는 경우

fadeTo()의 투명도 값은 0부터 1 사이로 작성해야 합니다.

// 좋지 않은 예
$("#box").fadeTo(500, 40);

// 좋은 예
$("#box").fadeTo(500, 0.4);

📌 3. 너무 많은 애니메이션을 한 번에 사용하는 경우

fade 효과는 적당히 사용하면 화면이 부드러워 보이지만, 너무 많이 사용하면 오히려 산만해질 수 있습니다.

중요한 알림, 안내 박스, 이미지 전환처럼 필요한 곳에만 사용하는 것이 좋습니다.

📌 4. jQuery 연결을 빼먹는 경우

fadeIn(), fadeOut(), fadeToggle(), fadeTo()도 jQuery 메서드이므로 jQuery 라이브러리를 먼저 연결해야 합니다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

15. 핵심 정리

fadeIn()은 숨겨진 요소를 서서히 나타나게 합니다.
fadeOut()은 보이는 요소를 서서히 사라지게 합니다.
fadeToggle()은 요소가 보이면 사라지게 하고, 숨겨져 있으면 나타나게 합니다.
fadeTo()는 지정한 투명도까지 요소를 서서히 변경합니다.
fadeIn(500)처럼 숫자를 넣으면 애니메이션 속도를 지정할 수 있습니다.
delay()를 함께 사용하면 알림을 잠시 보여준 뒤 사라지게 만들 수 있습니다.
callback을 사용하면 fade 효과가 끝난 후 다음 동작을 실행할 수 있습니다.

이번 글에서는 jQuery의 fadeIn(), fadeOut(), fadeToggle(), fadeTo() 사용법에 대해 알아봤습니다.

fade 효과는 요소를 단순히 보이고 숨기는 것보다 더 부드러운 화면 전환을 만들 수 있어서 알림, 카드, 이미지, 안내 박스에 자주 사용됩니다.

다음 글에서는 [jQuery] 11. slideDown(), slideUp(), slideToggle() 사용법에 대해 알아보겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 12. append(), prepend() 사용법 (1)	2026.06.21
[jQuery] 11. slideDown(), slideUp(), slideToggle() 사용법 (0)	2026.06.20
[jQuery] 09. show(), hide(), toggle() 사용법 (0)	2026.06.20
[jQuery] 08. addClass(), removeClass(), toggleClass() 사용법 (0)	2026.06.20
[jQuery] 07. attr()와 prop() 사용법 (0)	2026.06.19