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

まず、これらの各メソッドの意味を説明します。
queue(name,[callback]): パラメーターが 1 つだけ渡されると、最初に一致した要素のキューを返します (これは関数配列になり、キュー名はデフォルトで fx になります); 2 つのパラメータが渡された場合、最初のパラメータは依然としてデフォルトのキュー名であり、2 番目のパラメータが の場合は 2 つの状況に分けられます。関数の場合、2 番目のパラメータが関数配列の場合、一致する要素のキューを新しいキュー (関数配列) に置き換えます。少し混乱しています。後で、ここをクリックしてデモを表示します。
dequeue(name): これは、キューを削除することを意味します。
clearQueue([queueName]):これは、オブジェクトで実行されていないすべてのキューをクリアするメソッドです。はオプションであり、デフォルトは fx ですが、個人的にはこのメソッドはそうではないと感じています。これはどのくらい便利ですか? 、このような効果を実現したいと考えています。1 から 7 までの数字の四角形があります。これらの 7 つは必須です。ブロックは左から右に順番に落ちます。
デモを表示するにはここをクリックしてください
CSS および HTML パーツはデモに含まれているため、投稿しません。従来の慣例に従って、実装するには次の jQ コードを使用する必要がある場合があります。 >

コードをコピー コードは次のとおりです: $('.one').delay(500).animate ({top:' =270px'},500,function(){

$('.two').lay(500).animate({ top:' =270px'},500,function(){

$('.three').lay(500).animate({top:' =270px'},500,function(){
$('.four').lay(500).animate( {top:' =270px'},500,function(){
$('.five').lay(500).animate({top :' =270px'},500,function(){
$('.six').lay(500).animate({top:' =270px'},500,function(){
$ ('.seven').animate({top:' =270px '},500,function(){
alert('連続落下動作終了! はい!')
} );
}); >});
});
});


まあ、効果は完璧です、しかし、あなたは耐えることができますか?このとき、特定の実行順序を変更したい場合、たとえば、3 が落ち始める前に 5 が落ちたい場合、または 8 から 15 に新しいマスを 8 つ追加した後はどうすればよいでしょうか。この効果を達成するには、明らかに別の簡潔で便利なメソッドが必要です。それが、次のコードを見てください:

コードをコピーします

コードは次のとおりです: 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({top:' =270px'},500,_takeOne);},
function(){$('.six') .lay(300).animate({top:' =270px'} ,500,_takeOne);},
function(){$('.seven').lay(300).animate({top:' =270px'},500,function(){
alert( '連続落下動作終了!');
});}
$('#demo') .queue('slideList',_slideFun); (){
$('#demo').dequeue('slideList');
_takeOne();


このようにすると、かなり単純になります。実装方法は?
1. 新しい配列を作成し、順序を変更して新しいアニメーションを追加するのが便利ですか?
2.このアニメーション関数配列のセットを slideList キューに追加します。
3. デキューを使用して、slideList キュー内の最初の関数を取り出して実行します。
4. 最初の関数を実行します。上記の説明がまだ理解できない場合は、ソースコードを参照してください。
clearQueue() メソッドについては、これ以上は説明しません。もちろん、queue() メソッドを使用して、現在の関数キューを [] 空の配列に直接置き換えることもできます (個人的には、より直感的な空の配列の置き換えをお勧めします)。 🎜>
元の投稿 Mr.Think のブログ: http://mrthink.net/jqueyapi-queue-dequeue/