jqueryのqueueメソッド

16271 ワード
jquery
queue:
Queueは主に要素上の関数キュー(デフォルトではfx)に関数(アニメーション効果)を追加するために使用され、dequeueは関数キュー内の最初の関数(すなわち、関数キューに最初に入った関数)を取り出して実行することができ、delayは要素上の関数キューの実行を遅らせることができます.
jqueryのアニメーション効果、例えばanimation()、show()、slideUp()、fadeIn()など、私から見ればqueueでfxキューに関数を追加し、dequeueで呼び出します.
queue関連使用法:
.queue(queueName):要素の関数キュー
.queue(queueName,newQueue):queueNameをnewQueueに置き換えるので.Queue(queueName,[])は、アニメーションを停止します.
.queue(queueName,callback):queueNameの実行後のコールバック関数です.後続のqueueNameのアニメーション関数は無視されます.
.clearQueue(queueName):関数キューを空にし、実行中の関数を続行します.
 
.dequeue(queueName):関数キューの最初の関数を取り出して実行します.
.delay(time,queueName):time(単位が微妙)を過ぎるとqueueNameの関数が実行されます.
注意:queueNameはデフォルトの「fx」です.
 
.stop()または.stop(false):実行中の関数をスキップし、すぐに次のアニメーション関数を実行します.
.stop(true):アニメーションをすぐに停止
.stop(false,true):すぐに現在の関数の終了状態にジャンプし、次の関数の実行を開始します.
ただしstop()はアニメーションキューのみを空にすることができ、すべてのパスを空にすることはできません.Queue()が作成したキュー(clearQueue可能).
 
animationでもqueue:.animation(params,options):params::アニメーションのプロパティと最終値としてのスタイルプロパティとその値を含むセットoptions:アニメーションの追加オプション.よく使われるように、duration/speed-アニメーションの持続時間を設定します.easing-使用するeasing関数を規定し、jqueryはswing(デフォルト)とlinearのみを提供し、他の必要なプラグインをダウンロードするには、http://james.padolsey.com/demos/jquery/easing/さまざまな効果を表示します.callback-アニメーションが完了した後に実行する関数を指定します.Queue-ブール値.効果キューにアニメーションを配置するかどうかを示します.デフォルトはtrueです.falseの場合、アニメーションはすぐに開始されます(現在実行中のアニメーション関数がある場合は、同時に実行されます).
 
実例練習を見てみましょう.
参照jQueryアニメーションの高度な使い方(上)--animationの.queue()関数
もしそうなら
インスタンス練習0:
$('#id1').fadeOut('slow').fadeIn('slow');

結果は、id 1が先に消えてから現れます.
先に消えてから別のdivに現れる効果を達成するには、次のように書きます.
実例練習1:
$('#id1').fadeOut('slow').appendTo($('#rightC')).fadeIn('slow');

<!--
.posRelative{position:relative;width:150px;height:210px;border:1px solid black;}
.myContainer{width:300px;overflow:hidden;}
.normalContainer{width:100px;height:100px;border:1px solid black;}
div[id^='id']{background:gray;width:50%;height:50%;margin:0 auto;}
div[id^='object']{position:absolute;width:100px;height:100px;top:100px;left:25px;background:blue;}
-->
 
id1
 
//<![CDATA[
$(function(){
$('#button1').toggle(
function(){$('#id1').fadeOut('slow').appendTo($('#rightC')).fadeIn('slow');},
function(){$('#id1').fadeOut('slow').appendTo($('#leftC')).fadeIn('slow');}
);
$('#button2').toggle(
function(){$('#id2').fadeOut('slow')
.queue(function(){$(this).appendTo($('#rightC2'));
})
.fadeIn('slow');},
function(){$('#id2').fadeOut('slow')
.queue(function(){$(this).appendTo($('#leftC2'));
})
.fadeIn('slow');}
);
$('#button3').toggle(
function(){$('#id3').fadeOut('slow')
.queue(function(){$(this).appendTo($('#rightC3')).dequeue();
})
.fadeIn('slow');},
function(){$('#id3').fadeOut('slow')
.queue(function(){$(this).appendTo($('#leftC3')).dequeue();
})
.fadeIn('slow');}
);
$('#button4').toggle(
function(){$('#id4').fadeOut('slow')
.queue(function(){$(this).appendTo($('#rightC4')).dequeue();
})
.fadeIn('slow')
.fadeOut('slow');},
function(){$('#id4').fadeOut('slow')
.queue(function(){$(this).appendTo($('#leftC4')).dequeue();
})
.fadeIn('slow')
.fadeOut('slow');}
);
$('#button5').click(function(){
$('#object1').animate({top:'-=20'},1000).animate({top:'-=20',opacity:0},1000);
})
$('.recoveryBtn').click(function(){
var obj=$(this).parent().next().find("div[id^='object']");
obj.css({opacity:1,top:'100px'});
})
$('#button6').click(function(){
$('#object2').animate({top:'-=20'},{duration: 1000, easing: 'linear'})
.animate({top:'-=20',opacity:0},{duration: 1000, easing: 'linear'});
})
$('#button7').click(function(){
$("#object3")
.delay(1000)
.queue(function() {
$(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();
})
.animate({top: "-=40"}, {duration: 2000});
})
$('#button8').click(function(){
$("#object4")
.delay(1000,'fade')
.queue('fade',function() {
$(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();
})
.animate({top: "-=40"}, {duration: 2000});
})
$('#button9').click(function(){
$("#object5")
.delay(1000,'fade')
.queue('fade',function() {
$(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();
})
.dequeue('fade')
.animate({top: "-=40"}, {duration: 2000});
})
})
//]]>
その結果、id 1はappendを先に、fadeOutをfadeInに、
なぜコード書き順に実行されなかったのでしょうか.
なぜなら、要素上の非アニメーション関数(cssやappendを変更するなど)は、アニメーション関数よりも自動的に実行されるからです.このような状況を変えるために,非アニメーション関数も関数キューに人為的に加えて実行すればよい.次のように変更します.
実例練習2:
$('#id1').fadeOut('slow')

         .queue(function(){$(this).appendTo($('#rightC);})

         .fadeIn('slow');

テスト:
 
id1
 
結果id 1が消え、ソースコードを見ることでappendも実行されているのにfadeInは実行されていないのはなぜですか?前の「queue関連用法」を見ればわかります.
どのように修正すれば予想される効果が得られますか?
次のようにしてみてください.
実例練習3:
$('#id1').fadeOut('slow')

         .queue(function(){$(this).appendTo($('#rightC')).dequeue();})

         .fadeIn('slow');

テスト:
 
id1
 
結果は、正常に表現された.
もしそうなら:
実例練習4:
$('#id1').fadeOut('slow')

         .queue(function(){$(this).appendTo($('#rightC')).dequeue();})

         .fadeIn('slow')

         .fadeOut('slow');

テストを続行:
 
id1
 
結果も予想する効果と一致し、fadeInが終了する後はないとしてもよい.dequeue()は、後のアニメーション関数も自分で実行します.
 
別の例を見てみましょう.
例:jQueryアニメーションの高度な使い方(上)--animationの.queue()関数から
divスタイルは、#object{position:absolute;width:200 px;height:200 px;top:100 px;left:0;background:blue;}
2 s以内にtopがデフォルトの100 pxから60 pxに均一になり、その2 sの後1 s以内にopacityがデフォルトの1から徐々に0になるという効果を達成します.
私が最初に考えたのは、
実例練習5:
$('#object').animate({top:'-=20'},1000)

            .animate({top:'-=20',opacity:0},1000);

      
object
結果:第1 sから第2 sの間に明らかな停滞があり,全体の上向き移動は均一ではなかった.
次のように自然に変更されます.
実例練習6:
$('#object').animate({top:'-=20'},{duration: 1000, easing: 'linear'})

   .animate({top:'-=20',opacity:0},{duration: 1000, easing: 'linear'});

      
object
結果:正常になりました.
別の方法では、topは2つの部分に分解されず、1秒後にopacityを同時に実行するように設定します.
実例練習7:
$("#object")

.delay(1000)

.queue(function() {

    $(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();

})

.animate({top: "-=40"}, {duration: 2000});

      
object
結果:1 s以降はopacityとtopが同時に開始され,これは要求に合致しなかった.
理由は分かりやすい:delayは「fx」を対象としており、queueはすぐに関数メンバーを「fx」に追加して実行し、animateも「fx」のメンバーである.したがってdelayが透明度を変化させるアニメーション効果だけを「fx」と区別する必要があります.
実例練習8:
$("#object")

.delay(1000,'fade')

.queue('fade',function() {

    $(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();

})

.animate({top: "-=40"}, {duration: 2000});

      
object
結果:topはすぐに実行されたが、opacityは実行されなかった.
次のように変更します.
実例練習9:
$("#object")

.delay(1000,'fade')

.queue('fade',function() {

    $(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();

})

.dequeue('fade')

.animate({top: "-=40"}, {duration: 2000});

      
object
結果:正常になりました.
そして取り除くと中のdequeue()(実例練習10)は、依然として正常に表現されている.
インスタンス練習7(.queueの関数が実行されている)とインスタンス練習8(.queue()のカスタム関数が実行されていない)を比較すると、次のことがわかります.
.queue('fx',callback)は、callbackを自分で実行することができる.Queue('yourOwnName',callback)は手動で実行する必要があります.dequeue('yourOwnName');
実は上述のようにではありませんて、fxの中の第1の関数はいつも自動的に実行するため、通過するのに関わらず.queue()か.animate()方式で追加されましたが、queueは後続のfx関数メンバーをブロックします.を選択して設定できます.Queue('yourOwnName',callback)は手動で実行する必要があります.
0、2、4、および次の例で検証できます.
$('#id1').queue(function(){$(this).appendTo($('#rightC'));})

         .fadeOut('slow') 

         .fadeIn('slow');  //  append
$('#id1').queue(function(){$(this).appendTo($('#rightC')).dequeue();})

         .fadeOut('slow') 

         .fadeIn('slow');  //  append、fadeOut、fadeIn    
$('#id1').queue(function(){$(this).appendTo($('#rightC'));})

         .dequeue()        //         

         .fadeOut('slow') 

         .fadeIn('slow');  //  append、fadeOut、fadeIn    
$('#id1').fadeOut('slow') 

         .queue(function(){$(this).appendTo($('#rightC'));})

         .dequeue()

         .fadeIn('slow');  //  fadeOut、append、fadeIn

 
インスタンス練習10(.queueの後の関数が実行されている)とインスタンス練習2(.queueの後の関数が実行されていない)を比較すると、理由がわかります.
.queueがqueueNameパラメータを持つ場合、デフォルトではqueueNameの後続関数は無視されます.このパラメータを持たないとfxは無視され、後続のfadeInはfxに追加されるので、インスタンス練習2ではleftは実行されません.一方、インスタンス練習10では「fade」のみが無視され、後続のanimateはfxに追加され、両者は影響を及ぼさない. 
カスタム関数リストに関するいくつかの練習:
$('#object')

.queue('fade',function() {

      $(this).animate({left: "+=100"},{duration: 1000}).dequeue('fade'); })

.animate({top: "-=40"}, {duration: 2000});//     animate
$("#object")

.delay(1000,'fade')

.queue('fade',function() {

    $(this).animate({left: "+=100"},{duration: 1000, queue: false});})

.dequeue('fade')

.queue('fade',function() {

    $(this).animate({opacity:0},{duration: 1000});})  //    

.animate({top: "-=40"}, {duration: 2000});

//     top，  1000ms     left。  left queue：true，      top，  1000ms       left，      ，  left   top      。
$("#object")

.delay(3000,'fade')

.queue('fade',function() {

    $(this).animate({left: "+=100"},{duration: 1000, queue: false}).dequeue('fade'); })

.dequeue('fade')

.queue('fade',function() {

    $(this).animate({opacity:0},{duration: 1000});})  

.animate({top: "-=40"}, {duration: 2000});

//     top，  2000ms top  ， 1000ms，  3s         left opacityt（  left queue:true,opacity:false       ）。
//   left   queue：true，   3s    left，   opacity。

もう1つの一般的な使い方は、すべてのアニメーション効果を発生順に1つの配列に集約することです.
var func=[

  function(){

    $("#id1").animate({left: "+=100"},1000 ,deq);

  },

  function(){

    $("#id1").delay(2000);

    $("#id1").animate({top: "+=50"},1000 ,deq);

  },

  function(){

     $("#p1").animate({height: "+=100"},1000 );

  } 

];

$('.divC').queue('myanimations',func); 

function deq(){$('.divC').dequeue();}

deq();

jQueryでは$(function(){})と(function($){})(jQuery)、$(document).ready(function(){})等の
Linuxの下でC言語のプログラミング——信号の処理