jQuery 데이터 - queue() 메서드
예제
큐의 길이를 표시합니다:
function showIt() {
var n = div.queue("fx");
$("span").text( n.length );
setTimeout(showIt, 100);
}
정의와 사용법
queue() 메서드는 일치하는 요소에서 실행되는 함수 큐를 표시하거나 조작합니다.
문법
.queue(queueName)
| 매개변수 | 설명 |
|---|---|
| queueName | 선택 사항입니다. 시퀀스 이름을 포함한 문자열 값입니다. 기본적으로 fx, 표준 효과 시퀀스입니다. |
큐 조작
queue() 메서드는 일치하는 요소에서 실행되는 함수 큐를 조작합니다.
문법
.queue(queueName,newQueue)
| 매개변수 | 설명 |
|---|---|
| queueName | 선택 사항입니다. 시퀀스 이름을 포함한 문자열 값입니다. 기본적으로 fx, 표준 효과 시퀀스입니다. |
상세 설명
각 요소는 jQuery가 추가한 함수 큐를 하나 이상 가질 수 있습니다. 대부분의 애플리케이션에서는 하나의 큐만 사용합니다(fx라는 이름으로 알려져 있습니다). 큐는 요소에서 동기적으로 동작 시킬 동작 시퀀스를 호출하며 프로그램 실행을 종료하지 않습니다. 표준적인 예시는 요소에서 여러 애니메이션 메서드를 호출하는 것입니다. 예를 들어:
$('#foo').slideUp().fadeIn();
이 문장이 실행될 때, 요소는 즉시 슬라이딩 애니메이션을 시작하지만, 블러 인 트랜지션은 fx 큐에 배치되어, 슬라이딩 트랜지션이 완료된 후에만 호출됩니다.
.queue() 메서드는 이 함수 큐에 직접 작업을 수행할 수 있게 합니다. 콜백 함수를 포함한 .queue() 메서드를 호출하는 것은 특히 유용합니다; 이는 큐의 끝에 새 함수를 추가할 수 있게 합니다.
이 기능은 애니메이션 메서드가 제공하는 콜백 함수와 유사하지만, 애니메이션 실행 중에 콜백 함수를 설정할 필요가 없습니다.
$('#foo').slideUp();
$('#foo').queue(function() {
alert('애니메이션 완료.');
$(this).dequeue();
});;
동일한 효과:
$('#foo').slideUp(function() {
alert('애니메이션 완료.');
);
주의하세요, .queue()를 통해 함수를 추가할 때, 마지막으로 .dequeue()를 호출해야 합니다. 이렇게 하면 다음 큐 함수가 실행될 수 있습니다.
예제 1
사용자 정의 함수에 큐 작업을 수행하다:
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});;
$("div").animate({left:'-=200'},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});;
$("div").slideUp();
);
예제 2
큐 배열을 설정하여 큐를 지우기:
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
);
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
);
$("div").slideUp();
);
$("#stop").click(function () {
$("div").queue("fx", []);
$("div").stop();
);
