jQueryのqueue()関数キューの使用例を詳しく解説

この記事では、jQueryのqueue()関数のサンプルチュートリアルを主に紹介します。queue()関数は、JavaScript関数の実行順序制御操作に便利です。現在の 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: オプション/String
タイプで指定されたキュー名。デフォルトは「fx」です (jQuery の標準アニメーション効果キューを表します)。 newQueue: 現在のキューの新しいキューの内容を置き換えるために使用されるオプション/配列タイプ。 callback: Function type で指定された関数がキューに追加されます。この関数には
関数パラメータ
があり、キュー内の最初の関数を削除して実行するために呼び出すことができます。

戻り値

queue()
関数の戻り値は、現在の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');
});

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

修正:

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

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

3. キュー: false

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

最初の 1000 ミリ秒では、高さを制御する "fx" キューのみが実行され、次の 1000 ミリ秒で、不透明度を制御する "fader" キューが実行されます。高さを制御する「fx」は並行して実行されます。ここでの類似点は、queue: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})

4. キューの長さを取得します

たとえば、キュ​​ー名を使用して、一致する要素の長さを取得します:

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

明らかに、キュー名「fx」のキューを取得します。 、長さを取得したい場合:

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

ここでのキューの長さは、まだ実行されていない一致する要素のキューの長さだけであることに注意してください。アニメーションの実行が終了すると、キューの長さは自動的に 0 に戻ります
。

5. 置換キュー

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

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

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

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

以上がjQueryのqueue()関数キューの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。