메서드 fadeToggle

메서드 fadeToggle는 요소의 투명도를 애니메이션화하여 번갈아 가며 부드럽게 표시하거나 숨깁니다.

구문

지정된 시간 동안 표시/숨기기, 기본값은 400ms:

.fadeToggle(지속시간);

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

.fadeToggle('slow' 또는 'fast');

매개변수를 지정하지 않으면 애니메이션이 없으며 요소가 즉시 표시/숨겨집니다:

.fadeToggle();

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

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

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

.fadeToggle(options);

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

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

예제

다음 예제에서 버튼 #toggle을 처음 클릭하면 요소 #test가 숨겨지고, 다시 클릭하면 표시됩니다. 이를 위해 메서드 fadeToggle를 사용합니다. 또한 속도를 1000ms로, 이징 함수 값을 linear로 설정합니다:

<button id="toggle">toggle</button>
<div id="test"></div>

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

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

함께 보기

메서드 slideToggle,
요소의 부드러운 표시/숨기기를 번갈아 수행합니다.
메서드 fadeTo,
요소의 투명도를 변경합니다.
메서드 toggle,
요소의 부드러운 표시/숨기기를 번갈아 수행합니다.
메서드 animate,
요소의 속성을 애니메이션화합니다.