jqueryキューqueueは原生と真似してその実現方法を共有します。
queue()メソッドは、マッチング要素上で実行される関数列を表示または操作する。
queueとdequeueの過程は主に以下の通りです。
関数をqueueでキューに入れ(通常は関数配列)、関数配列の最初の関数をdequeueで取り出して実行するということは、dequeueを再実行すると別の関数が得られます。また、dequeueを実行しないと、キューの次の関数は永遠に実行されないことを意味する。
一つの要素にアニメーションを加えると、jQuery内部にfxという関数の列が追加されます。複数の要素に対して順番にアニメーションを実行するには、マニュアルでキューを設定して行わなければなりません。
一つの例では、二つのdivを順番に左に移動します。
jQueryでアニメーションアニメーションアニメーションのアニメイトの列が実現しました。以下はJavaScriptで一つを真似します。
queueとdequeueの過程は主に以下の通りです。
関数をqueueでキューに入れ(通常は関数配列)、関数配列の最初の関数をdequeueで取り出して実行するということは、dequeueを再実行すると別の関数が得られます。また、dequeueを実行しないと、キューの次の関数は永遠に実行されないことを意味する。
一つの要素にアニメーションを加えると、jQuery内部にfxという関数の列が追加されます。複数の要素に対して順番にアニメーションを実行するには、マニュアルでキューを設定して行わなければなりません。
一つの例では、二つのdivを順番に左に移動します。
<div id="block1">div 1</div>
<div id="block2">div 2</div>
<script type="text/javascript">
var FUNC=[
function() {$("#block1").animate({color:"=blue"},aniCB);},
function() {$("#block2").animate({color:"=red"},aniCB);},
function() {$("#block1").animate({color:"=yellow"},aniCB);},
function() {$("#block2").animate({color:"=grey"},aniCB);},
function() {$("#block1").animate({color:"=green"},aniCB);},
function(){alert(" ")}
];
var aniCB=function() {
$(document).dequeue("myAnimation");
}
$(document).queue("myAnimation",FUNC)
//aniCB();
</script>
まず関数配列を作りました。中には順番にアニメーションを実行する列があります。その後、私はdequeue方法で列の次の関数を実行します。それから、この関数配列をdocument上のmyAnimationの列に入れます。私は便利のためにこの列をdocumentに置いただけです。最後に列の中の最初の関数を実行し始めました。このようにする利点は、関数配列が直線的に展開され、増減が非常に便利です。また、次のアニメーションを続けない場合(たとえばユーザーがボタンを押した場合)は、その列をクリアするだけでいいです。もっと増やすには、列に入れるだけです。
//
$(document).queue("myAnimation",[]);
//
$(document).queue(“myAnimation”,function(){alert(" !")});
これはもちろんajaxのような方法にも使えます。一連のajaxインタラクションが必要なら、各ajaxは前の終了後から始まることを望んでいます。これまでの最も原始的な方法はコールバック関数を使うことです。同様にqueueを利用してキューを追加し、ajax以降のフィードバックでdequeueを実行すればいいです。jQueryでアニメーションアニメーションアニメーションのアニメイトの列が実現しました。以下はJavaScriptで一つを真似します。
function Queue(){
this.a = [];
this.t = null;
}
Queue.prototype = {
queue:function(s){
var self = this;
this.a.push(s);
this.hold();
return this;
},
hold:function(){
var self = this;
clearTimeout(this.t);
this.t = setTimeout(function(){
console.log("Queue start! ",self.a);
self.dequeue();
},0);
},
dequeue:function(){
var s = this.a.shift(),self = this;
if(s){
console.log("s:"+s);
setTimeout(function(){
console.log("end:"+s);
self.dequeue();
},s);
}
}
};
var a = new Queue().queue(500).queue(200).queue(400).queue(1500).queue(300).queue(2000);