jQuery 데이터 - jQuery.queue() 메서드
예제
큐의 길이를 표시합니다:
function showIt() {
var n = div.queue("fx");
$("span").text( n.length );
setTimeout(showIt, 100);
}
정의와 사용법
queue() 메서드는 일치하는 요소에서 실행되는 함수 큐를 표시하거나操作합니다.
주의사항:이는 하위 수준의 메서드입니다. 다음과 같이 사용합니다: .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();
);
