dequeue 메서드

dequeue 메서드는 함수 큐에서 다음 함수를 실행할 수 있게 해줍니다. 메서드가 호출되면 함수가 큐에서 제거된 후 실행됩니다. 함수 체인이 계속 실행되려면 함수가 이 메서드를 호출해야 합니다. 요소에 바인딩된 함수 큐를 작업할 수 있게 해주는 queue 메서드도 참조하세요.

문법

다음과 같이 큐의 다음 함수 작업을 계속할 수 있습니다. 선택적 매개변수로 문자열 형식의 큐 이름을 전달할 수 있습니다. 매개변수를 전달하지 않으면 메서드는 fx 큐와 함께 작동합니다:

.dequeue([큐 이름]);

예제

이 예제에서는 queue 메서드를 사용하여 newcolor 클래스를 추가해 사각형을 초록색으로 다시 칠하는 사용자 정의 함수를 추가합니다. 보시다시피, 그 후 여기서 dequeue가 호출되어 함수를 큐에서 제거하고 다음 함수가 실행될 수 있게 합니다:

<button id="animate">시작</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}

div.newcolor {
	background: green;
}

$('#animate').click(function() {
	$('div')
		.show('slow')
		.animate({left: '+=200'}, 2000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});

참고 항목

함수 큐를 표시하고 수정할 수 있게 해주는 queue 메서드
함수 큐에서 실행되지 않은 모든 항목을 제거할 수 있게 해주는 clearQueue 메서드