jQuery_jquery의 queue() 함수 튜토리얼 예제

현재 jQuery 객체가 여러 요소와 일치하는 경우: 대기열을 가져올 때 첫 번째로 일치하는 요소에서만 대기열을 가져옵니다. 대기열을 설정할 때(대체 대기열, 추가 기능) 각 일치 요소에 대해 별도로 설정합니다.
이 함수는 jQuery 객체(인스턴스)에 속합니다. 대기열의 첫 번째 함수를 제거하고 실행해야 하는 경우 dequeue() 함수를 사용하세요. ClearQueue() 함수를 사용하여 지정된 대기열을 지울 수도 있습니다.

문법
이 기능은 jQuery 1.2의 새로운 기능입니다. queue() 함수는 다음 두 가지 용도로 사용됩니다.

용법 1:

jQueryObject.queue( [ queueName ] [, newQueue ] )

매개변수가 지정되지 않거나 queueName 매개변수만 지정된 경우 지정된 이름의 함수 큐를 얻는다는 의미입니다. newQueue 매개변수가 지정되면 새 대기열 newQueue를 사용하여 현재 대기열의 모든 콘텐츠를 설정(교체)한다는 의미입니다.

용법 2:

jQueryObject.queue( [ queueName ,] callback )

지정된 대기열에 지정된 기능을 추가합니다(종료).
참고: queue() 함수의 모든 설정 작업은 현재 jQuery 개체와 일치하는 각 요소에 대해 수행됩니다. 모든 읽기 작업은 첫 번째 일치 요소에 대해서만 수행됩니다.

매개변수
이전 구문 섹션에 정의된 매개변수 이름을 기반으로 해당 매개변수를 찾아보세요.
queueName: 선택 사항/문자열 유형으로 지정된 대기열 이름, 기본값은 "fx"입니다(jQuery의 표준 애니메이션 효과 대기열을 나타냄).
newQueue: 선택적/배열 유형 현재 대기열의 내용을 대체하는 데 사용되는 새 대기열입니다.
콜백: 함수 유형에 지정된 함수가 대기열에 추가됩니다. 이 함수에는 대기열의 첫 번째 함수를 제거하고 실행하기 위해 호출되는 함수 매개변수가 있습니다.

반환값
queue() 함수의 반환 값은 Array/jQuery 유형입니다. 반환 값의 유형은 현재 queue() 함수가 get 작업을 수행하는지 아니면 set 작업을 수행하는지에 따라 다릅니다.
queue() 함수가 설정 작업(큐 교체, 함수 추가)을 수행하면 현재 jQuery 객체 자체를 반환하고, 검색 작업을 수행하면 획득한 함수 대기열(배열)을 반환합니다.
현재 jQuery 객체가 여러 요소와 일치하는 경우 데이터를 읽을 때 queue() 함수는 일치하는 첫 번째 요소만 사용합니다.

예:
1. jQuery는 필요한 코드를 대기열에 삽입할 수 있는 queue() 함수를 제공합니다

$('#test-change1').toggle(function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-goal1'));
    next();
  }).show('slow');

},function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-origin1'));
    next();      
  }).show('slow');
});

2. 맞춤 대기열

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
});

그러나 이것은 단지 이 코드일 뿐입니다. 실제로 웹 페이지에 추가하고 실행해 보면 "보이는 대로 얻는다"는 것이 아니며 전혀 효과가 없다는 것을 알게 됩니다.

수정 후:

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
})
.dequeue("custom"); //this is the key

dequeue()의 일반적인 정의는 "큐의 최상위 함수를 삭제하고 실행하는 것"입니다. 나는 "삭제"라는 단어에 동의하지 않지만 "제거"를 선호합니다. 사실 이 함수의 기능은 큐의 이전 함수가 실행된 후 마지막 큐에 대한 포인터와 같습니다. 대기열의 기능이 제거되었습니다.

3. 대기열: 거짓

$("#object")
.delay(1000, "fader")
.queue("fader", function(next) {
  $(this).animate({opacity: 0},
    {duration: 1000, queue: false});
  next();
})
.dequeue("fader")
.animate({top: "-=40"}, {duration: 2000})

처음 1000밀리초 동안은 높이를 조절하는 'fx' 큐만 실행되고, 다음 1000밀리초에는 불투명도를 조절하는 '페이더' 큐와 높이를 조절하는 'fx' 큐가 실행된다. 병렬로. 여기서 병렬 처리는 queue:false

$('#section3a').slideUp(1000)
      .slideDown(1000)
      .animate({width: '50px'}, {duration: 1000, queue: false});

4. 대기열 길이를 가져옵니다
예를 들어 대기열 이름을 사용하여 일치하는 요소의 길이를 가져옵니다.

var $queue=$("div").queue('fx');

물론 대기열 이름이 'fx'인 대기열을 가져옵니다. 길이를 가져오려면 다음을 수행하세요.

var $length=$('div').queue('fx').length;

여기서 대기열 길이는 아직 실행되지 않은 일치 요소의 대기열 길이일 뿐이라는 점에 유의하세요. 애니메이션 실행이 완료되면 대기열 길이가 자동으로 0으로 줄어듭니다.

5. 교체 대기열

$('div').queue('fx',function(){
    $('div').slideDown('slow')
         .slideUp('slow')
         .animate({left:'+=100'},4000);
});//定义fx
$('div').queue('fx2',function(){
    $('div').slideDown('fast')
         .slideUp('fast')
         .animate({left:'+=100'},1000);
});//定义fx2

여기에는 두 개의 대기열이 정의되어 있습니다. 하나는 기본 'fx'인 느린 대기열이고 다른 하나는 빠른 대기열 'fx2'입니다.

버튼을 클릭했을 때:

$('input').click(function(){
  $('div').queue('fx',fx2);
});