fadeTo 메서드

fadeTo 메서드는 요소의 투명도를 0부터 1까지의 범위에서 지정한 값까지 부드럽게 변경합니다.

구문

지속 시간과 투명도는 메서드를 사용하는 모든 경우에 지정해야 합니다. 지정된 시간(기본값 400ms) 동안 투명도를 변경:

.fadeTo(duration, opacity);

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

.fadeTo('slow' 또는 'fast', opacity);

선택적 세 번째 매개변수로 callback 함수를 전달할 수도 있습니다. 애니메이션 완료 후 실행됩니다:

.fadeTo(duration, opacity, [callback-function]);

이징 함수와 콜백 함수(선택적 매개변수)도 전달할 수 있습니다. 콜백 함수는 애니메이션 완료 후 실행됩니다:

.fadeTo(duration, opacity, [easing-function], [callback-function]);

다음 예제에서는 fadeTo 메서드를 사용하여 #hide 버튼을 클릭하면 #test 요소의 투명도가 0.5까지 줄어들며 숨겨지고, #show 버튼을 클릭하면 다시 나타납니다:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

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

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