jQuery / Method / .fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드

jQuery의 .fadeOut()은 요소의 불투명도를 낮춘 뒤 display를 none으로 바꿔 숨깁니다. 화면과 배치에서 사라져도 DOM의 요소 자체를 삭제하지는 않으므로, 나중에 다시 표시할 수 있습니다. 실제로 제거하려면 효과가 끝난 뒤 완료 콜백에서 .remove()를 호출합니다.

숨김·삭제·실행 시간을 구분하기

.fadeOut() 공식 문서에 따르면 효과가 끝나면 display: none이 적용되어 문서 배치에서 차지하던 공간도 없어집니다. 진행 중에는 불투명도가 줄어드는 효과이며 높이가 점점 접히는 효과는 아닙니다. DOM(Document Object Model, 문서 객체 모델)에서 요소를 지우는 것은 별도의 동작입니다.

주요 형식은 .fadeOut(duration, easing, complete)이며 선택 인수를 생략할 수 있습니다. 시간의 기본값은 400밀리초, "fast"는 200, "slow"는 600입니다. .fadeOut(800)은 800밀리초 동안 사라지는 뜻이지 800밀리초를 기다렸다가 시작한다는 뜻이 아닙니다. easing의 기본값은 swing이며, 일정한 진행에는 시간 뒤에 "linear"를 지정합니다.

입력값으로 차이를 확인하는 전체 예제

전체 코드를 UTF-8의 fadeout-demo.html로 저장하고 브라우저에서 엽니다. 공식 jQuery 전체 배포 파일을 CDN(Content Delivery Network, 콘텐츠 전송 네트워크)에서 읽을 인터넷 연결이 필요하며 별도 설치는 없습니다. slim 배포본에는 effects 모듈이 없으므로 전체 파일을 사용합니다.

코드는 4.0.0을 사용하고, 숨김·삭제·입력값·복원·중도 초기화를 3.7.1과 4.0.0에서 실행해 확인했습니다. 제어 버튼을 알림 상자 바깥에 두어 숨겨진 뒤에도 Restore와 Reset을 사용할 수 있습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fade out versus remove</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    #notice { padding: 20px; background: #e5f2f0; margin: 16px 0; }
    button, select, input { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Fade out versus remove</h1>
  <label for="duration">Duration:</label>
  <select id="duration"><option value="800">800 ms</option><option value="0">0 ms</option></select>
  <button type="button" id="fade">Fade only</button>
  <button type="button" id="remove">Fade then remove</button>
  <button type="button" id="restore">Restore</button>
  <button type="button" id="reset">Reset</button>
  <div id="host">
    <div id="notice">
      <p>A temporary notice</p>
      <label>Note: <input id="note" value="Keep me"></label>
    </div>
  </div>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const initialHtml = $("#host").html();
      function enable() {
        $("#fade, #remove").prop("disabled", false);
      }
      function report(state) {
        $("#result").text(`state=${state} | nodes=${$("#notice").length}`);
      }
      function fade(removeAfter) {
        const $notice = $("#notice");
        if (!$notice.length) {
          report("missing");
          return;
        }
        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = reduce ? 0 : Number($("#duration").val());
        $notice.stop(true, false);
        $("#fade, #remove").prop("disabled", true);
        report("fading");
        $notice.fadeOut(duration, function () {
          if (removeAfter) $(this).remove();
          enable();
          report(removeAfter ? "removed" : "hidden");
        });
      }
      $("#fade").on("click", () => fade(false));
      $("#remove").on("click", () => fade(true));
      $("#restore").on("click", function () {
        if (!$("#notice").length) $("#host").html(initialHtml);
        $("#notice").stop(true, false).css("opacity", "").show();
        enable();
        report("visible");
      });
      $("#reset").on("click", function () {
        $("#notice").stop(true, false);
        $("#host").html(initialHtml);
        enable();
        report("visible");
      });
      report("visible");
    });
  </script>
</body>
</html>

초기 알림에는 Keep me가 입력되어 있고 다음 결과가 표시됩니다.

state=visible | nodes=1

1. Note 입력값을 edited로 바꾼 뒤 Fade only를 누릅니다. 800밀리초 동안 사라진 후 state=hidden | nodes=1입니다.
2. Restore를 누르면 같은 알림이 다시 보이고 입력값 edited가 남습니다. 숨겨졌어도 기존 요소가 유지되었기 때문입니다.
3. Fade then remove를 누르면 효과가 끝난 뒤 실제로 삭제하여 state=removed | nodes=0입니다. 완료 전에 .remove()를 호출하지 않으므로 사라지는 과정을 볼 수 있습니다.
4. 삭제 후 Restore는 초기 HTML로 새 알림을 만듭니다. 입력값도 Keep me로 돌아가며 edited가 자동 복구되지는 않습니다.
5. 효과 진행 중 Restore는 현재 애니메이션을 중단하고 기존 알림을 표시합니다. Reset은 진행 중 효과를 중단한 뒤 초기 HTML로 새로 만들므로 수정한 값도 초기화합니다.
6. Duration을 0 ms로 바꾸면 점진적 효과 없이 같은 완료 처리를 수행합니다. 동작 줄이기 설정이 감지된 경우도 0을 사용합니다.

실제 편집 화면에서 삭제한 뒤 사용자의 수정값까지 복구하려면 그 데이터를 별도로 보관하고 새 요소에 반영해야 합니다. 이 실습의 Restore는 삭제한 입력값을 복구하는 기능이 아니라, 기존 요소가 있으면 표시하고 없으면 고정된 초기 내용을 재생성하는 기능입니다.

완료 뒤에 삭제하고 빈 대상을 처리하기

.remove()는 요소와 그 안의 내용뿐 아니라 연결된 jQuery 데이터와 이벤트도 제거합니다. 숨긴 것과 동일한 보관 방식으로 생각하면 안 됩니다. 예제는 .fadeOut()의 완료 콜백에서 removeAfter가 참일 때만 this를 삭제합니다. 일반 함수의 this는 효과가 끝난 DOM 요소입니다.

.fadeOut()은 완료까지 다음 JavaScript를 막지 않습니다. 호출 바로 다음 줄에 .remove()를 붙이면 아직 효과가 끝나지 않은 요소가 사라져 전환을 볼 수 없습니다. 여러 요소를 선택하면 완료 콜백은 요소마다 실행되며, 이 예제는 고유 ID로 하나만 대상으로 삼습니다.

이미 삭제되어 선택 결과가 비면 요소별 완료 콜백도 없습니다. 예제는 시작 전에 .length를 확인해 state=missing | nodes=0을 표시하고 돌아갑니다. 덕분에 없는 대상을 기다리느라 버튼이 계속 비활성화되는 일을 피합니다.

중도 복원과 반복 실행 점검하기

.stop(true, false)는 남은 효과 대기열을 지우고 현재 효과를 완료시키지 않고 중단합니다. 완료 콜백을 실행하지 않으므로 Restore나 Reset 뒤에 이전 콜백이 알림을 다시 삭제하지 않습니다. Restore는 중간 불투명도도 지우고 .show()로 표시하며, Reset은 중단 후 초기 HTML을 넣습니다.

Fade 버튼들은 실행 중에 비활성화하여 중복 요청이 쌓이지 않게 하고, Restore·Reset은 사용할 수 있게 둡니다. 현재 효과의 종료로 판단하는 처리와 취소로 판단하는 처리를 구분해야 카운터와 화면 상태가 엇갈리지 않습니다.

효과가 없거나 오류가 나면 전체 jQuery 파일 로딩과 Console의 .fadeOut is not a function 오류, 선택 범위를 확인합니다. 즉시 사라지면 0 ms나 동작 줄이기가 적용되었는지 확인합니다. 이미 숨겨진 요소는 보이는 요소처럼 다시 사라지는 과정이 없으므로 Restore 후 비교합니다.