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