toggle 메서드

toggle 메서드는 요소의 부드러운 표시와 숨김을 전환합니다. 요소가 표시되어 있으면 숨겨지고, 그 반대의 경우도 마찬가지입니다.

구문

밀리초 단위로 지정된 시간 동안 표시, 기본값은 400ms입니다:

.toggle(지속시간);

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

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

display 매개변수에 값 true 또는 false를 전달할 수 있습니다. true인 경우 요소는 표시만 되고, false인 경우 숨겨집니다:

.toggle(display);

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

.toggle();

두 번째 매개변수로 이징 함수를 전달할 수 있으며, 세 번째 매개변수로 callback 함수를 전달할 수 있습니다 - 애니메이션 완료 후 실행됩니다. 두 매개변수 모두 선택 사항입니다:

.toggle(지속시간, [이징 함수], [callback 함수]);

두 번째 선택적 매개변수로 간단히 callback 함수를 전달할 수 있습니다 - 애니메이션 완료 후 실행됩니다:

.toggle(지속시간, [callback 함수]);

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

.toggle(options);

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

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

예제

버튼을 클릭한 후, toggle 메서드를 사용하여 숨겨진 단락을 부드럽게 표시해 보겠습니다. 키워드 slow를 전달하면 속도를 600ms로 설정합니다. 다시 클릭하면 숨깁니다:

<button>텍스트 표시</button>
<p style="display: none">텍스트</p>

$('button').click(function() {
	$('p').toggle('slow');
});

함께 보기

요소의 투명도를 변경하는 메서드 fadeToggle
요소의 부드러운 표시/숨김을 전환하는 메서드 slideToggle
요소를 부드럽게 표시하는 메서드 show
요소를 부드럽게 숨기는 메서드 hide