jQuery 입문 | 이펙트(effect) 효과 | 페이드 효과 .fadeIn() .fadeOut() .fadeToggle()

페이드(fade) 효과

jQuery에서 페이드(fade) 효과는 해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현한다. 이러한 페이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같다.

메소드 설명
.fadeIn() 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 나타지게 함.
.fadeOut() 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 사라지게 함.
.fadeToggle() 선택한 요소에 fadeIn() 메소드와 fadeOut() 메소드를 번갈아가며 적용함.
.fadeTo() 페이드 효과에서 사용하는 opacity 속성값을 직접 설정함.

.fadeIn() .fadeOut() 메소드 - 표시 및 숨기기

.fadeOut() 메소드는 선택한 요소를 서서히 사라지게 하고, .fadeIn() 메소드는 서서히 나타나게 한다.

$("#btnFadeOut").on("click", function() {
    $("div").fadeOut();
});
$("#btnFadeIn").on("click", function() {
    $("div").fadeIn();
});

위 예제에서는 <div> 요소를 .fadeOut() 메소드로 사라지게 하고, .fadeIn() 메소드로 표시한다.

코드 실행

.hide() .show() 메소드 - 효과 속도 설정

인수로 밀리초(ms)로 설정하거나 “slow”, “fast"와 같은 예약어를 전달하여, 이펙트 효과의 속도를 설정할 수도 있다.

$("#btnFadeOut").on("click", function() {
  $("div").fadeOut(1000);
});
$("#btnFadeIn").on("click", function() {
  $("div").fadeIn("fast");
});

위 예제에서는 .fadeOut(1000) 메소드와 .fadeIn("fast") 메소드에 효과의 속도를 설정하고 있다.

코드 실행

.fadeToggle() 메소드 - 페이드 효과의 토글

jQuery에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .fadeToggle() 메소드를 사용할 수 있습니다
선택한 요소가 현재 사라진 상태라면 .fadeIn() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .fadeOut() 메소드의 동작을 수행한다.

$("#btnFadeToggle").on("click", function() {
  $("div").fadeToggle();
});

위 예제에서는 id가 btnFadeToggle인 요소을 클릭하면 <div> 요소가 번갈아 가면서 표시가 되었다가 숨겨진다.

코드 실행

.fadeTo() 메소드 - 페이드 효과의 투명도 설정

.fadeTo() 메소드를 사용하면, 페이드 효과에서 사용하는 최종 opacity 속성값을 직접 설정할 수 있다.

$("button").on("click", function() {
  $("#first").fadeTo(1000, 0.2);
  $("#second").fadeTo(1000, 0.5);
  $("#third").fadeTo(1000, 0.8);
});

위 예제에서는 id가 “first”, “second”, “third"인 요소를 1초에 걸쳐 opacity 속성값을 각각 0.2, 0.5, 0.8로 변경한다.

코드 실행




최종 수정 : 2021-08-27