jQuery_jquery の queue() 関数のサンプル チュートリアル

現在の jQuery オブジェクトが複数の要素に一致する場合: キューを取得するときは、最初に一致した要素のキューのみを取得します。キューを設定するとき (置換キュー、追加関数)、一致する要素ごとに個別に設定します。
この関数は jQuery オブジェクト (インスタンス) に属します。キュー内の最初の関数を削除して実行する必要がある場合は、dequeue() 関数を使用します。また、clearQueue() 関数を使用して、指定したキューをクリアすることもできます。

文法
この関数は jQuery 1.2 の新機能です。 queue() 関数には次の 2 つの用途があります:

使用法 1:

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

パラメータが指定されていない場合、または queueName パラメータのみが指定されている場合は、指定された名前の関数キューを取得することを意味します。 newQueue パラメータが指定されている場合は、新しいキュー newQueue を使用して、現在のキュー内のすべての内容を設定 (置き換え) することを意味します。

使用法 2:

jQueryObject.queue( [ queueName ,] callback )

指定された関数を指定されたキューに追加します(終了)。
注: queue() 関数のすべての設定操作は、現在の jQuery オブジェクトと一致する各要素に対して行われます。すべての読み取り操作は、最初に一致した要素に対してのみ行われます。

パラメータ
前の構文セクションで定義されたパラメーター名に基づいて、対応するパラメーターを見つけてください。
queueName: オプション/文字列型で指定されたキュー名。デフォルトは「fx」（jQuery の標準アニメーション効果キューを表します）です。
newQueue: オプション/配列タイプ 現在のキューの内容を置き換えるために使用される新しいキュー。
callback: Function type で指定された関数がキューに追加されます。この関数には、キュー内の最初の関数を削除して実行するために呼び出される関数パラメーターがあります。

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

しかし、これは単なるコードです。実際に Web ページに追加して実行してみると、「表示されているものがそのまま得られる」ものではなく、まったく効果がないことがわかります。

変更後:

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

dequeue() の一般的な定義は、「キューの先頭の関数を削除して実行する」ことです。私は「削除」という言葉には同意しませんが、「削除」の方が好きです。実際、この関数の機能は、キュー内の前の関数が実行された後のキューへのポインタのようなものです。キューの先頭の関数が削除されます。

3. キュー: false

$("#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 ミリ秒で、不透明度を制御する「fader」キューと高さを制御する「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

ここでは 2 つのキューが定義されています。1 つは低速キュー (デフォルトの 'fx')、もう 1 つは高速キュー 'fx2' です

ボタンがクリックされたとき:

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