jQueryのキュー制御メソッドqueue()/dequeue()/clearQueue()の詳細説明

jQueryの中核には、queue制御メソッドのセットがあり、このメソッドセットは、queue()/dequeue()/clearQueue()の3つのメソッドで構成されています。 Ziru は、主に animate() メソッド、ajax、および時系列で実行する必要があるその他の イベント で使用されます。

まず、このメソッド グループの意味を説明します。
queue(name,[callback]): パラメータが渡されたときのみ、最初に一致した要素のキューを返します (関数配列になり、キュー名はデフォルトで fx になります)。が渡されると、最初のパラメータはデフォルトで fx. キュー名になり、2 番目のパラメータが関数の場合は、一致した要素のキューの最後に関数が追加されます。は関数配列です。要素のキューは新しいキュー (関数配列) に置き換えられます。これは少し分かりにくいかもしれません。後で、

dequeue を見てみましょう。 (名前): これは分かりやすくキューの最後から フロントエンドがキュー関数を削除して実行します
clearQueue([queueName]):1.4で追加された新しいメソッドですまだ実行されていないオブジェクトのキューをすべてクリアします。パラメータはオプションで、デフォルトは fx ですが、個人的には、このメソッドを使用して 2 番目のパラメータを渡します。 ClearQueue メソッドを実装するための 2 つのパラメーターです。
ここで、このような効果を実現したいと考えています。 1 から 7 までのマークが付けられたデジタル正方形があります。これは必須です。 7 つの正方形が左から右に順番に落ちます。 デモを表示するには、ここをクリックしてください。

CSS および HTML 部分は投稿しません。これらは DEMO デモに含まれています。通常の手順に従う場合は、次の jQ コード実装を使用する必要がある場合があります:

$('.one').delay(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({top:'+=270px'},500,function(){
							$('.seven').animate({top:'+=270px'},500,function(){
								alert('按序落体运动结束! Yeah!')
							});
						});
					});
				});
			});
		});
	});

。そうですね、効果は完璧に表現されていますが、このめまぐるしいコードを許容できますか? たとえ許容できたとしても、この時点で特定の実行順序を置き換えたい場合、たとえば開始前に 5 を実行したい場合は、 3 に落ちる場合、または 8 から 15 までの 8 つの新しいブロックを追加する場合は、何を変更する必要がありますか? 明らかに、この効果を実現するには、別の種類の簡潔で便利な方法が必要です。 jQuery のキュー制御メソッドを参照してください:

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

このように、実装方法は簡単です。
1. 新しい配列を作成し、Animation 関数を配置します。もう 1 つ (この方法で順序を変更します。新しいアニメーションを追加する方が便利ですか?)
2. キューを使用して、このアニメーション関数配列のセットを slideList キューに追加します。3. デキューを使用して、最初のアニメーション関数配列を取り出します。
最初の関数の最初の実行。上記の説明が不明な場合は、ソース コードを参照してください。もちろん、queue() メソッドを使用して、現在の関数キューを [] 空の配列に直接置き換えることもできます。実装 (個人的には、より直感的な空の配列の置換をお勧めします)。

以上がjQueryのキュー制御メソッドqueue()/dequeue()/clearQueue()の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。