queue 메서드

queue 메서드를 사용하면 요소에 바인딩된 함수 큐를 작업할 수 있습니다. 아직 실행되지 않은 모든 함수를 큐에서 제거할 수 있는 clearQueue 메서드도 참고하세요.

문법

다음은 요소에 바인딩된 실행 대기 중인 함수 큐를 표시하는 방법입니다. 선택적 매개변수로 큐 이름을 문자열로 전달할 수 있습니다 (기본값은 fx - 표준 효과 큐임):

.queue([queueName]);

큐를 조작할 수 있습니다. 각 요소에 대해 한 번씩 실행됩니다. 이를 위해 두 번째 매개변수로 현재 큐의 내용을 대체할 함수 배열을 전달할 수 있습니다:

.queue([queueName], newQueue );

또는 두 번째 매개변수로 큐에 추가할 새로운 callback 함수를 전달할 수 있습니다. 이 함수는 차례로 매개변수로 다른 함수를 받습니다. 이를 통해 다음 항목을 큐에서 자동으로 제거하고 큐를 진행시킬 수 있습니다:

.queue([queueName], callback(next) {
	next();
});

각 요소는 하나 이상의 큐를 가질 수 있습니다. 많은 애플리케이션에서는 하나만 사용합니다(fx). 큐는 프로그램 실행을 중단하지 않고 요소에 대한 일련의 작업을 비동기적으로 수행할 수 있게 합니다. queue를 callback 함수와 함께 호출하면 새 함수를 큐의 끝에 배치할 수 있습니다. callback 함수는 셋의 각 요소에 대해 한 번씩 실행됩니다. queue를 사용하여 함수를 추가할 때, 체인의 다음 함수가 작동하도록 하기 위해 나중에 dequeue 메서드가 호출될 것임을 확신해야 합니다.

예시

사용자 정의 함수를 추가해 봅시다. 먼저, #animate를 클릭한 후, 우리는 2초 동안 오른쪽으로 이동하는 빨간색 사각형을 표시한 다음, queue를 사용하여 newcolor 클래스를 추가하여 사각형을 녹색으로 다시 칠하는 사용자 정의 함수를 추가할 것입니다. 보시다시피, 그런 다음 큐에서 함수를 제거하기 위해 dequeue가 호출됩니다. 그 후 우리의 사각형은 0.5초 동안 왼쪽으로 이동하고 두 번째 사용자 정의 함수를 사용하여 newcolor 클래스를 제거함으로써 빨간색으로 다시 칠해질 것입니다. 애니메이션이 끝나면 우리의 사각형을 접습니다:

<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();
});

예시

이전 큐를 삭제하기 위해 배열 형태의 큐를 추가해 봅시다. #start 버튼을 클릭하면 이전 예시의 애니메이션이 보일 것입니다. #stop 버튼을 클릭하면 빈 배열을 추가하여 애니메이션을 중지시킬 것입니다. #start를 다시 클릭하면 애니메이션이 처음부터 다시 시작될 것입니다:

<button id="start">시작</button>
<button id="stop">중지</button>
<div></div>

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

$('#start').click(function() {
	$('div')
		.show('slow')
		.animate({left: '+=200'}, 5000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 1500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});
	
$('#stop').click(function() {
	$('div').queue('fx', []).stop();
});

참고 항목

요소의 속성에 애니메이션을 적용하는 animate 메서드
함수 큐에서 실행되지 않은 모든 항목을 제거할 수 있는 clearQueue 메서드
함수 큐에서 다음 함수를 실행할 수 있게 하는 dequeue 메서드