slideToggle 메서드
slideToggle 메서드는 숨겨진 요소를
부드럽게 표시하고 표시된 요소를 숨깁니다.
구문
지정된 시간 동안 표시/숨기기,
기본값은 400ms:
.slideToggle(지속시간);
시간은 밀리초뿐만 아니라 키워드 slow (600ms)
및 fast (200ms)로도 지정할 수 있습니다. 값이 클수록
애니메이션이 느려집니다:
.slideToggle('slow' 또는 'fast');
매개변수를 지정하지 않으면 애니메이션이 없고, 요소는 즉시 표시/숨겨집니다:
.slideToggle();
두 번째 매개변수로 이징 함수를 전달할 수 있으며, 세 번째 매개변수로 콜백 함수(애니메이션 완료 후 실행)도 전달할 수 있습니다. 두 매개변수 모두 선택 사항입니다:
.slideToggle(지속시간, [이징 함수], [콜백 함수]);
키: 값 쌍을 포함하는 JavaScript 객체 형태로 다양한 옵션을 메서드에 전달할 수 있습니다:
.slideToggle(options);
이러한 객체는 다음과 같은
매개변수와 함수를 전달할 수 있습니다 - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. 이들 매개변수에 대한 설명은
animate 메서드에서
확인할 수 있습니다. 예를 들어,
지속시간과 이징 함수를 설정해 보겠습니다:
.slideToggle( {duration: 600, easing: easeInSine} );
예제
버튼을 클릭한 후,
slideToggle 메서드를 사용하여 단락을 포함하는
상위 div를 부드럽게 숨겨 보겠습니다(이 div는
parent 메서드를
사용하여 찾을 수 있습니다).
버튼을 다시 클릭하면 div가
다시 부드럽게 표시되는 식입니다. 키워드
slow를 전달하여 속도를 600ms로 설정하겠습니다:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
