fadeOut 메서드

fadeOut 메서드는 요소를 부드럽게 숨깁니다. 요소는 fadeIn 메서드를 사용하여 불투명하게 만들어 보여줄 수 있습니다.

구문

지정된 시간(기본값 400ms) 동안 사라지기:

javascript.fadeOut(지속시간);

시간은 밀리초뿐만 아니라 키워드 slow (600ms) 및 fast (200ms)로도 지정할 수 있으며, 값이 클수록 애니메이션이 느려집니다:

javascript.fadeOut('slow' 또는 'fast');

매개변수를 지정하지 않으면 애니메이션이 실행되지 않고 요소가 즉시 숨겨집니다:

javascript.fadeOut();

두 번째 매개변수로 이징(easing) 함수를, 그리고 세 번째 매개변수로 콜백(callback) 함수(애니메이션 완료 후 실행됨)를 전달할 수도 있습니다. 두 매개변수 모두 선택 사항입니다:

javascript.fadeOut(지속시간, [이징 함수], [콜백 함수]);

다양한 옵션을 JavaScript 객체 형태로, 키: 값 쌍을 포함하여 메서드에 전달할 수 있습니다:

javascript.fadeOut(옵션);

이러한 객체는 다음과 같은 매개변수와 함수를 전달할 수 있습니다 - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. 이러한 매개변수에 대한 설명은 animate 메서드 페이지에서 확인할 수 있습니다. 예를 들어, 지속시간과 이징 함수를 설정해 보겠습니다:

javascript.fadeOut( {duration: 800, easing: easeInSine} );

예제

다음 예제에서는 #hide 버튼을 클릭하면 #test 요소가 fadeOut 메서드를 사용하여 사라지고, #show 버튼을 클릭하면 fadeIn 메서드를 사용하여 나타납니다. 또한 속도를 1000ms로 설정합니다:

html<button id="hide">숨기기</button>
<button id="show">보이기</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

예제

다음 예제에서는 #test 요소를 나타내는 애니메이션이 끝난 후 '!' 텍스트로 메시지를 표시하고, 숨기는 애니메이션이 끝난 후에는 '?' 텍스트로 메시지를 표시합니다:

html<button id="hide">숨기기</button>
<button id="show">보이기</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

함께 보기