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