페이드(Fade) 효과 정리

제이쿼리의 .fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo() 메소드를 활용한 부드러운 투명도 전환 효과 구현 방법

---

페이드 효과란?

페이드 효과는 CSS opacity(투명도) 속성을 점진적으로 조절하여

요소가 서서히 나타나거나 사라지도록 하는 애니메이션 기능입니다.

제이쿼리는 이 효과를 간편하게 사용할 수 있는 전용 메소드를 제공합니다.

---

.fadeIn()과 .fadeOut()

1. .fadeIn()

• 요소의 opacity를 0에서 1로 점점 증가시켜 서서히 나타냄
• 숨겨진 요소에만 적용됨

$("#fadeInBtn").on("click", function() {
  $("#divBox").fadeIn("slow"); // 느리게 나타남
});

2. .fadeOut()

• 요소의 opacity를 1에서 0으로 감소시켜 서서히 사라짐

$("#fadeOutBtn").on("click", function() {
  $("#divBox").fadeOut(2000); // 2초 동안 사라짐
});

---

.fadeToggle() – 상태 자동 전환

요소가 보이면 fadeOut(), 숨겨져 있으면 fadeIn() 을 자동으로 수행합니다.

$("#fadeToggleBtn").on("click", function() {
  $("#divBox").fadeToggle(1000);
});

---

.fadeTo() – 투명도 설정

• 요소는 보인 상태를 유지하되, 지정한 opacity 값으로 점진적으로 변경됨
• 투명도 값은 0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 숫자

$("#fadeBtn").on("click", function() {
  $("#divBox_01").fadeTo(2000, 0.2);
  $("#divBox_02").fadeTo(2000, 0.5);
  $("#divBox_03").fadeTo(2000, 0.8);
});

---

페이드 메소드 요약

메소드	설명
.fadeIn()	요소를 서서히 나타나게 함 (opacity ↑)
.fadeOut()	요소를 서서히 사라지게 함 (opacity ↓)
.fadeToggle()	현재 상태에 따라 .fadeIn() 또는 .fadeOut() 실행
.fadeTo()	지정한 투명도(opacity)로 점진적 전환

---

응용 예제

1. 연속 페이드 효과

여러 요소를 순차적으로 사라지게 하거나 나타나게 할 수 있습니다.

$("#sequentialFade").on("click", function() {
  $("#box1").fadeOut(1000, function() {
    $("#box2").fadeOut(1000, function() {
      $("#box3").fadeOut(1000);
    });
  });
});

---

2. 사용자 입력으로 투명도 조절

$("#setOpacity").on("click", function() {
  const value = parseFloat($("#opacityInput").val());
  if (value >= 0 && value <= 1) {
    $("#divBox").fadeTo(1000, value);
  } else {
    alert("0.0 ~ 1.0 사이의 값을 입력하세요.");
  }
});

• 실시간 사용자 입력을 반영해 요소의 투명도를 변경할 수 있습니다.

---

3. 반복 페이드 애니메이션

$(function() {
  function fadeLoop() {
    $("#divBox").fadeOut(1000).fadeIn(1000, fadeLoop);
  }
  fadeLoop();
});

• 애니메이션을 반복 실행하여 주목을 끌거나 알림 효과로 활용할 수 있습니다.

---

활용 팁

1. 속도 설정

   • "fast", "slow" 또는 숫자(ms)를 적절히 조절해 부드러운 효과 구현

2. 콜백 함수 사용

   • .fadeIn()이나 .fadeOut() 뒤에 콜백을 사용해 애니메이션 종료 후 작업 수행

   $("#divBox").fadeOut(1000, function() {
     alert("숨겨졌습니다!");
   });
   

3. 반복 애니메이션 구현

   • 재귀 함수와 콜백을 조합해 자동 반복 효과 만들기 가능

---

질문 정리

.fadeIn()은 어떤 요소에 적용할 수 있나요?

→ display: none 상태인 숨겨진 요소에만 적용됩니다.

.fadeTo()는 언제 쓰나요?

→ 요소는 보이게 유지하고 투명도만 조절하고 싶을 때 사용합니다.

페이드 효과는 레이아웃에 영향을 주나요?

→ 아닙니다. 요소의 opacity만 조절하므로 위치, 크기 등 레이아웃엔 영향이 없습니다.

애니메이션 종료 후 작업은 어떻게 하나요?

→ .fadeIn(), .fadeOut() 등의 콜백 함수를 활용하면 됩니다.