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

페이드(fade) 효과

jQuery에서 페이드(fade) 효과는 해당 요소의 CSS 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로 변경한다.

코드 실행