메서드 stop

메서드 stop를 사용하면 실행 중인 애니메이션을 즉시 중지할 수 있습니다. 애니메이션은 이전 애니메이션이 완료되지 않은 상태에서 다음 함수부터 계속 실행됩니다.

구문

다음은 실행 중인 애니메이션을 중지하는 방법입니다. 두 개의 선택적 매개변수를 전달할 수 있으며, 이 매개변수는 부울(boolean) 값을 받습니다. 첫 번째 매개변수를 true로 설정하면 애니메이션 큐에 남아 있는 함수들이 삭제되어 실행되지 않습니다. 두 번째 매개변수를 true로 설정하면 애니메이션 중지 시 요소의 CSS 속성이 즉시 최종 값을 가지게 됩니다(즉, 요소를 부드럽게 숨기는 것이 목표였다면 요소가 즉시 숨겨집니다):

.stop([clearQueue], [jumpToEnd]);

선택적 매개변수로 큐 이름을 지정할 수도 있습니다:

.stop([queueName], [clearQueue],[jumpToEnd]);

전역 설정인 jQuery.fx.off = true를 사용하여 애니메이션을 전역적으로 비활성화할 수 있으며, 이는 지속 시간 값을 0으로 설정합니다.

예제

#toggle 버튼을 클릭할 때마다 직사각형이 slideToggle 메서드를 사용하여 펼쳐지거나 접히도록 만들어 봅시다. 애니메이션이 완료되기 전에 버튼을 계속 클릭해 보세요 - stop 메서드 덕분에 다음 단계가 이전 단계의 완료를 기다리지 않고 실행됩니다:

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

#test {
	background-color: green;
	border: 1px solid black;
	width: 200px;
	height: 100px;
	margin: 10px;
}

$('#toggle').on('click', function() {
	$('#test').stop().slideToggle(1500);
});

참고 항목

메서드 clearQueue,
실행되지 않은 모든 항목을 함수 큐에서 제거할 수 있습니다
속성 jQuery.fx.off,
애니메이션을 전역적으로 비활성화할 수 있습니다