[JQuery] CSS 페이드 효과 페이드 인 아웃

해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현합니다

 

메서드들을 한번 알아볼까요?

페이드 효과

fadeIn

요소를 점점 나타나게 합니다. opacity 0 -> 1

$("button").on("click", function() {
  $("target").fadeIn(); 
});

속도를 조절할 수 있습니다

$("button").on("click", function() {
  $("target").fadeIn('slow'); 
});
$("button").on("click", function() {
  $("target").fadeIn('fast'); 
});
$("button").on("click", function() {
  $("target").fadeIn(2000); // 2초
});

fadeOut

요소를 점점 사라지게 합니다. opacity 1 -> 0

$("button").on("click", function() {
  $("target").fadeOut(); 
});

속도를 조절할 수 있습니다

$("button").on("click", function() {
  $("target").fadeOut('slow'); 
});
$("button").on("click", function() {
  $("target").fadeOut('fast'); 
});
$("button").on("click", function() {
  $("target").fadeOut(2000); // 2초
});

fadeToggle

선택한 요소의 현재 표시 상태에 따라 다른 동작을 합니다.

$("button").on("click", function() {
  $("target").fadeToggle(); 
});

fadeTo

페이드 효과에서 사용하는 최종 opacity 속성값을 직접 설정할 수 있습니다

$("button").on("click", function() { 
  $("#target1").fadeTo(1000, 0.2); 
  $("#target2").fadeTo(1000, 0.5); 
  $("#target3").fadeTo(1000, 0.8); 
});

1000은 1초를 뜻합니다