jQueryキューの操作方法 example_jquery-jsチュートリアル-php.cn

jQueryキューの操作方法 example_jquery

WBOY

リリース： 2016-05-16 16:45:06

オリジナル

1147 人が閲覧しました

jQuery の中核には、キュー制御メソッドのセットがあり、このメソッドのセットは、queue()/dequeue()/clearQueue() の 3 つのメソッドで構成されており、簡潔で制御が容易であると言えます。継続的かつ順次に実行する必要がある関数。主に animate() メソッド、ajax、および時系列で実行する必要があるその他のイベントで使用されます。

まず、このメソッドのグループの意味を説明します。

queue(name,[callback] ): パラメーターが 1 つだけ渡された場合、最初に一致した要素のキューを返し、それを指します (関数配列となり、キュー名のデフォルトは fx です)。 ; 2 つのパラメータが渡された場合、最初のパラメータは依然として fx のキュー名です。2 番目のパラメータが関数の場合、キューの最後に関数が追加されます。 2 番目のパラメータが関数 array の場合、一致する要素のキューを新しいキュー (関数配列) に置き換えます。これは理解するのが少しわかりにくいかもしれません。 : これは簡単に説明すると、キューの先頭からアイテムを削除して実行することです。

clearQueue([queueName]): 1.4 の新しいメソッドです。パラメータはオプションであり、デフォルトは fx ですが、個人的には、このメソッドを使用して 2 つのパラメータのうち 2 番目のパラメータを渡すのはあまり役に立ちません。

ここで、1 から 7 までの数字の四角形を使用して、このような効果を実現したいと考えています。これらの 7 つの四角形は、左から右の順序で配置する必要があります。CSS と HTML の部分を確認してください。デモ
それらはデモに含まれているため、投稿しません。従来のアプローチに従う場合、それを実現するには次の jQ コードを使用する必要がある場合があります。

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

$('.one').lay(500).animate({
 top: ' =270px'
},
500,
function() {
 $('.two').delay(500).animate({
 top: ' =270px'
 },
 500,
 function() {
 $('. three').delay(500).animate({
 top: ' =270px'
 },
 500,
 function() {
 $('.four').delay (500).animate({
 top: ' =270px'
 },
 500,
 function() {
 $('.five').delay(500).animate ({
 top: ' =270px'
 },
 500,
 function() {
 $('.six').delay(500).animate({
上: ' =270px'
 },
 500,
 function() {
 $('.seven').animate({
 トップ: ' =270px'
 } ,
 500,
 function() {
 aler('按序落体运動结束!そうです!')
 });
 });
 });
 });
 });
 });
});

嗯、没错、效果很完美的プレゼン现给出来了、しかしこれ种晕眩的代码、你能忍受吗? 即時忍受できますか、もしこのとき、あなたが想ったある特定の実行順序、比如、想った5落下後再び落下3を開始するか、あるいは新たに8から15八方块、怎么办？重写吗？里面小心冀吗の変更? ただし、この効果を達成するには、別の列の説明便宜が必要です。那就は jQuery 队列制御メソッドです。

复制代码代码如下:

var _slideFun = [function() {
 $('.one').delay(500).animate({
 top: ' =270px'
 },
 500, _takeOne);
},
function() {
 $('.two').lay(300).animate({
 top: ' =270px'
 }, 
 500, _takeOne);
},
function() {
 $('.three').lay(300).animate({
 top: ' =270px'
 },
 500, _takeOne);
},
function() {
 $('.four').lay(300).animate({
 top: ' =270px '
 },
 500, _takeOne);
},
function() {
 $('.five').lay(300).animate({
 トップ: ' =270px'
 },
 500, _takeOne);
},
function() {
 $('.six').lay(300).animate({
 トップ: ' =270px'
 },
 500, _takeOne);
},
function() {
 $('.seven').lay(300).animate( {
 top: ' =270px'
 },
 500,
 function() {
 alert('按序落体运动结束! Yeah!');
 }); 
}];
$('#demo').queue('slideList', _slideFun);
var _takeOne = function() {
 $('#demo').dequeue(' slideList');
};
_takeOne();

这样一来、看起来是不是简明多了。どのように实现しますか?
1. 新建一数组,ハンドルアニメーション関数数依次放进去(这样更改顺序,新加アニメーション是不是方便多了?);
2. キューを使用してこの組版アニメーション関数数組をスライドリスト中に追加します;
3. dequeue を使用してslideList队列の中の最初の関数、并実行它;
4. 最初の実行第一関数数。

clearQueue() メソッドに関しては、多くの評価があり、演技中に停止するのはclearQueue() メソッドです。もちろん、queue() メソッドを直接使用して、存在する関数数列を [] 空数組に置き換えることもできます(个人比较推荐空数组替换.,更直观).