jQuery - Fade 효과

다음 메소드를 사용하면 요소의 투명도를 조절하여 요소를 보이거나 숨길 수 있습니다.

메소드	설 명
.fadeOut(speed, easing, callback)	서서히 투명해지면서 요소를 숨김. (투명도 조절) 1. speed: 감추는 속도를 제어. 선택 사항, 기본값: 400(밀리 초) slow: 천천히. 200(밀리 초) fast: 빠르게. 600(밀리 초) 밀리 초: 1000/1(초)를 지정 2. easing: 가속도를 제어. (선택 사항) swing: 시작과 끝이 느리게 움직이지만 중간에는 빠르게 움직임. 기본값 linear: 일정한 속도로 움직임 3. callback: 콜백 함수는 작업이 완료된 후에 실행됨. (선택 사항)
.fadeIn(speed, easing, callback)	서서히 불투명해지면서 요소를 보이게 함. (불투명도 조절) 1. speed: 보여주는 속도를 제어. 선택 사항, 기본값 400(밀리 초) slow: 천천히. 200(밀리 초) fast: 빠르게. 600(밀리 초) 밀리 초: 1000/1(초)를 지정 2. easing: 가속도를 제어. (선택 사항) swing: 시작과 끝이 느리게 움직이지만 중간에는 빠르게 움직임. 기본값 linear: 일정한 속도로 움직임 3. callback: 콜백 함수는 작업이 완료된 후에 실행됨. (선택 사항)
.fadeToggle(speed, easing, callback)	요소를 서서히 불투명하게 또는 투명하게 하여 감추거나 보여줌 speed, easing, callback 매개변수를 그대로 사용 가능. (요소가 숨겨져 있으면 .fadeIn(), 보이면 .fadeOut() 이 됨)
.fadeTo(speed, opacity, easing, callback)	요소의 투명도를 조절 1. speed: 투명해지는 속도를 제어. (필수 선택) slow: 천천히. 200(밀리 초) fast: 빠르게. 600(밀리 초) 밀리 초: 1000/1(초)를 지정 2. opacity: 0.0 ~ 1 사이의 수이며, 0 에 가까울수록 투명해집니다. (필수 선택) 3. easing: 가속도를 제어. (선택 사항) swing: 시작과 끝이 느리게 움직이지만 중간에는 빠르게 투명해짐. 기본값 linear: 일정한 속도로 움직임 4. callback: 콜백 함수는 작업이 완료된 후에 실행됨. (선택 사항)

.fadeIn() 과 .fadeOut()

보여주는 메소드와 감추는 메소드는 동일하게 다음의 방식 중 하나를 이용합니다.

$(select).fadeOut();

$(select).fadeOut(speed);

$(select).fadeOut(speed, function);

$(select).fadeOut(speed, easing);

$(select).fadeOut(speed, easing, function);

요소를 감추거나 보이게 하는 fade 효과를 넣으면 선택한 요소가 서서히 투명해지면서 공간을 지웁니다. 대개 이미지를 투명해지게 하거나 감추었던 이미지가 서서히 불투명해지면서 보여주게 됩니다. 이와 같이 CSS 의 opacity 효과를 넣을 수 있습니다.

<style>
.use-nth {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
</style>

<script>
$(function(){
  $("#fade_in").click(function(){
    $(".use-nth").fadeIn(2000, 'swing');
  });

  $("#fade_out").click(function(){
    $(".use-nth").fadeOut(2000, 'linear');
  });
});
</script>

<div class="use-nth"><img src="aran.jpg"></div>

<button id="fade_out">감추기</button>
<button id="fade_in">보이기</button>

.fadeToggle()

.fadeToggle() 은 .fadeOut() 과 .fadeIn() 을 하나로 합친 메소드입니다. 감춰져 있으면 서서히 불투명해지면서 보여주고, 보여져 있으면 서서히 투명해지면서 감춥니다.

버튼을 누를 때마다 감추거나 보여주는 소스를 따로 작성하기보다 토글 메소드 하나로 정의하면 소스가 훨씬 간결해집니다.

매개변수는 위와 동일하게 모두 사용할 수 있습니다.

<style>
.use-nth {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
</style>

<script>
$(function(){
  $("#fade_toggle").click(function(){
    $(".use-nth").fadeToggle(2000, 'linear');
  });
});
</script>

<div class="use-nth"><img src="aran.jpg"></div>

<button id="fade_toggle">보이기/감추기</button>

.fadeTo()

위 메소드와 달리 단지 선택한 요소를 점진적으로 투명하게 합니다. 매개변수 speed 와 opacity 는 필수 선택입니다. 그리고 opacity 는 0.0 에서 1.0 사이의 값을 넣을 수 있으며 0에 가까울 수록 투명해집니다.

$(select).fadeOut(speed, opacity);

$(select).fadeOut(speed, opacity, easing);

$(select).fadeOut(speed, oapcity, easing, function);

'투명하게'버튼을 누르면 이미지가 '0.4'만큼 서서히 투명해집니다.

<style>
.use-nth {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
</style>

<script>
$(function(){
  $("#fade_toggle").click(function(){
    $(".use-nth").fadeTo(2000, 0.4, 'linear');
  });
});
</script>

<div class="use-nth"><img src="aran.jpg"></div>

<button id="fade_toggle">투명하게</button>