jQuery_jqueryのqueue()メソッドの使用例

この記事の例では、jQuery での queue() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このメソッドは、一致する要素上で実行される関数キューを表示または操作できます。

このメソッドはあまり頻繁には使用されないかもしれませんが、非常に重要です。以下にこのメソッドの使用例を示します。
効果はメソッドのパラメータによって異なります。
注: dequeue() 関数と合わせて学習することをお勧めします。
文法構造 1:

コードをコピー コードは次のとおりです:

$("selector").queue(queueName)

パラメータリスト:

参数	描述
queueName	可选。 第一个匹配元素上动画队列的名称，默认值是“fx”。

パラメータがない場合は、最初に一致した要素のアニメーション キューを返すことができます。

コード例:

コードをコピーします コードは次のとおりです:

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#do").click(function(){
$(".mytest").show(1000);
$(".mytest").animate({left:" =200"},3000);
$(".mytest").animate({top:" =50"},2000);
$(".mytest").text("アニメーションが完了しました");
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})

クリックしてアニメーションを開始
キュー内の関数の数をカウントします

queue() 関数にはパラメータがないため、戻り値は最初に一致した要素のアニメーション キューです。これは、2 番目のボタンをクリックすると、現在のキュー内の番号が返されます。アニメーションの数をリアルタイムで計算します。 文法 2:

コードをコピー コードは次のとおりです:$("selector").queue(callback())

一致する要素の関数キューの最後に関数を追加できます。

パラメータリスト:

参数	描述
callback()	匹配元素上的函数队列最后面要添加的函数。

文法 1 の例では、問題に気づくかもしれません。つまり、すべてのアニメーションが完了した後に div に「アニメーションが完了しました」という単語を追加したいと考えていますが、操作の実際のパフォーマンスから判断すると、そうではありません。主な理由は、show() および animate() アニメーション関数がデフォルトで fx アニメーション キューに追加され、text() メソッドがアニメーション関数ではないため、fx キューに追加されず、が最初に実行されます。次に、この関数を使用して text() メソッドをキューに入れることができます。

コード例:

例 1:

コードをコピーします コードは次のとおりです:

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#do").click(function(){
$(".mytest").show(1000);
$(".mytest").animate({left:" =200"},3000);
$(".mytest").animate({top:" =50"},2000);
$(".mytest").queue(function(){$(this).text("アニメーションが完了しました")});
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})

クリックしてアニメーションを開始
キュー内の関数の数をカウントします

上記のコードは、必要な最終的な効果を実現します。

例 2:

コードをコピーします コードは次のとおりです:

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#do").click(function(){
$(".mytest").show(1000);
$(".mytest").animate({left:" =200"},3000);
$(".mytest").animate({top:" =50"},2000);
$(".mytest").queue(function(){
$(this).text("アニメーションは継続します");
});
$(".mytest").animate({left:"-=200"},3000);
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})

クリックしてアニメーションを開始
キュー内の関数の数をカウントします

上記のコードでは、text()メソッドを実行した後にカスタムアニメーションを実行したいのですが、パフォーマンスがこのようにならず、最後のカスタムアニメーションが実行されません。
コードは次のように変更されます:

コードをコピーします コードは次のとおりです:

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#do").click(function(){
$(".mytest").show(1000);
$(".mytest").animate({left:" =200"},3000);
$(".mytest").animate({top:" =50"},2000);
$(".mytest").queue(function(){
$(this).text("アニメーションは継続します");
$(this).dequeue();
});
$(".mytest").animate({left:"-=200"},3000);
})
$("#count").click(function(){
alert($(".mytest").queue().length)
})
})

クリックしてアニメーションを開始
キュー内の関数の数をカウントします

上記のコードは要件を実装しています。コードに を追加します。

コードをコピー コードは次のとおりです:$(this).dequeue();

つまり、queue() を通じて関数を追加するときは、キューに入れられた次の関数が実行できるように、最終的に .dequeue() が呼び出されるようにする必要があります。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。