fadeIn 메서드
fadeIn 메서드는 숨겨진 요소를 불투명하게 만들어 부드럽게 표시합니다. 요소는 fadeOut 메서드를 사용해 투명하게 만들어 숨길 수 있습니다.
구문
지정된 시간(기본값 400ms) 동안 표시하기:
.fadeIn(지속시간);
시간은 밀리초뿐만 아니라 키워드 slow (600ms) 및 fast (200ms)로도 설정할 수 있으며, 값이 클수록 애니메이션 속도가 느려집니다:
.fadeIn('slow' 또는 'fast');
매개변수를 지정하지 않으면 애니메이션이 없으며 요소가 즉시 표시됩니다:
.fadeIn();
두 번째 매개변수로 easing 함수를 전달할 수 있으며, 세 번째 매개변수로 애니메이션 완료 후 실행되는 콜백 함수를 전달할 수 있습니다. 두 매개변수 모두 선택사항입니다:
.fadeIn(지속시간, [easing 함수], [콜백 함수]);
JavaScript 객체 형태로 키: 값 쌍을 포함하는 다양한 옵션을 메서드에 전달할 수 있습니다:
.fadeIn(options);
이러한 객체는 다음 매개변수와 함수를 전달할 수 있습니다 - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. 이러한 매개변수에 대한 설명은 animate 메서드에서 확인할 수 있습니다. 예를 들어, 지속시간과 easing 함수를 설정해 보겠습니다:
.fadeIn( {duration: 800, easing: easeInSine} );
예제
다음 예제에서 버튼 #hide을 클릭하면 #test 요소가 fadeOut 메서드를 사용하여 숨겨지고, 버튼 #show을 클릭하면 fadeIn 메서드를 사용하여 표시됩니다. 또한 속도를 1000ms로 설정하겠습니다:
<button id="hide">숨기기</button>
<button id="show">표시하기</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
예제
다음 예제에서는 #test 요소를 표시하는 애니메이션이 끝난 후 텍스트 '!'가 포함된 메시지를 출력하고, 숨길 때는 텍스트 '?'가 포함된 메시지를 출력합니다:
<button id="hide">숨기기</button>
<button id="show">표시하기</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
