queue()/ 上のjQuery.comドキュメントdequeue()は単純すぎるため理解できません。jQueryのキューとは正確には何ですか？それらをどのように使用すればよいですか？
回答:
.queue()と.dequeue()jQueryのキューはアニメーションに使用されます。あなたはあなたが好きな目的のためにそれらを使用することができます。これらは、を使用して要素ごとに保存された関数の配列ですjQuery.data()。それらは先入れ先出し（FIFO）です。を呼び出してキューに関数を追加でき、.queue()を使用して関数を（呼び出して）削除できます.dequeue()。
内部のjQueryキュー関数を理解するには、ソースを読んで例を見ると、非常に役立ちます。私が見たキュー関数の最も良い例の1つは.delay()次のとおりです。
$.fn.delay = function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
type = type || "fx";
return this.queue( type, function() {
var elem = this;
setTimeout(function() {
jQuery.dequeue( elem, type );
}, time );
});
};fxjQueryのデフォルトのキューはfxです。デフォルトのキューには、他のキューと共有されない特別なプロパティがいくつかあります。
$(elem).queue(function(){});、fx自動的dequeueに次の関数が実行され、キューが開始されていない場合は実行されます。dequeue()から関数を実行するときはいつでもfx、unshift()（配列の最初の場所にプッシュされます）文字列"inprogress"-キューが現在実行されていることを示すフラグ。fxキューがで使用され.animate()、デフォルトでそれを呼び出すと、すべての機能。注：カスタムキューを使用している場合は.dequeue()、関数を手動で実行する必要があります。関数は自動起動しません。
.queue()関数引数なしで呼び出すことにより、jQueryキューへの参照を取得できます。キュー内のアイテム数を確認する場合は、このメソッドを使用できます。あなたは使用することができpush、pop、unshift、shift場所でキューを操作します。.queue()関数に配列を渡すことにより、キュー全体を置き換えることができます。
簡単な例：
// lets assume $elem is a jQuery object that points to some element we are animating.
var queue = $elem.queue();
// remove the last function from the animation queue.
var lastFunc = queue.pop();
// insert it at the beginning:
queue.unshift(lastFunc);
// replace queue with the first three items in the queue
$elem.queue(queue.slice(0,3)); fx）キューの例：$(function() {
// lets do something with google maps:
var $map = $("#map_canvas");
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($map[0], myOptions);
var resized = function() {
// simple animation callback - let maps know we resized
google.maps.event.trigger(map, 'resize');
};
// wait 2 seconds
$map.delay(2000);
// resize the div:
$map.animate({
width: 250,
height: 250,
marginLeft: 250,
marginTop:250
}, resized);
// geocode something
$map.queue(function(next) {
// find stackoverflow's whois address:
geocoder.geocode({'address': '55 Broadway New York NY 10006'},handleResponse);
function handleResponse(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location = results[0].geometry.location;
map.setZoom(13);
map.setCenter(location);
new google.maps.Marker({ map: map, position: location });
}
// geocoder result returned, continue with animations:
next();
}
});
// after we find stack overflow, wait 3 more seconds
$map.delay(3000);
// and resize the map again
$map.animate({
width: 500,
height: 500,
marginLeft:0,
marginTop: 0
}, resized);
});var theQueue = $({}); // jQuery on an empty object - a perfect queue holder
$.each([1,2,3],function(i, num) {
// lets add some really simple functions to a queue:
theQueue.queue('alerts', function(next) {
// show something, and if they hit "yes", run the next function.
if (confirm('index:'+i+' = '+num+'\nRun the next function?')) {
next();
}
});
});
// create a button to run the queue:
$("<button>", {
text: 'Run Queue',
click: function() {
theQueue.dequeue('alerts');
}
}).appendTo('body');
// create a button to show the length:
$("<button>", {
text: 'Show Length',
click: function() {
alert(theQueue.queue('alerts').length);
}
}).appendTo('body');私が開発し$.ajaxQueue()使用して、プラグイン$.Deferred、.queue()と$.ajax()もバックパスに約束リクエストが完了解決されます。$.ajaxQueue1.4でも機能する別のバージョンが、Ajaxリクエストのシーケンスに対する私の回答に投稿されています
/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/
(function($) {
// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});
$.ajaxQueue = function( ajaxOpts ) {
var jqXHR,
dfd = $.Deferred(),
promise = dfd.promise();
// queue our ajax request
ajaxQueue.queue( doRequest );
// add the abort method
promise.abort = function( statusText ) {
// proxy abort to the jqXHR if it is active
if ( jqXHR ) {
return jqXHR.abort( statusText );
}
// if there wasn't already a jqXHR we need to remove from queue
var queue = ajaxQueue.queue(),
index = $.inArray( doRequest, queue );
if ( index > -1 ) {
queue.splice( index, 1 );
}
// and then reject the deferred
dfd.rejectWith( ajaxOpts.context || ajaxOpts,
[ promise, statusText, "" ] );
return promise;
};
// run the actual query
function doRequest( next ) {
jqXHR = $.ajax( ajaxOpts )
.done( dfd.resolve )
.fail( dfd.reject )
.then( next, next );
}
return promise;
};
})(jQuery);これをlearn.jquery.comの記事として追加しました。そのサイトにはキューに関する他の素晴らしい記事があります。見てください。
$(window)？
$({})
キューメソッドを理解するには、jQueryがアニメーションを実行する方法を理解する必要があります。複数のanimateメソッド呼び出しを次々に記述する場合、jQueryは「内部」キューを作成し、これらのメソッド呼び出しをそれに追加します。次に、それらのアニメーション呼び出しを1つずつ実行します。
次のコードを検討してください。
function nonStopAnimation()
{
//These multiple animate calls are queued to run one after
//the other by jQuery.
//This is the reason that nonStopAnimation method will return immeidately
//after queuing these calls.
$('#box').animate({ left: '+=500'}, 4000);
$('#box').animate({ top: '+=500'}, 4000);
$('#box').animate({ left: '-=500'}, 4000);
//By calling the same function at the end of last animation, we can
//create non stop animation.
$('#box').animate({ top: '-=500'}, 4000 , nonStopAnimation);
}'queue' / 'dequeue'メソッドを使用すると、この「アニメーションキュー」を制御できます。
デフォルトでは、アニメーションキューの名前は「fx」です。ここでは、キューメソッドの使用方法を示すさまざまな例のサンプルページを作成しました。
http://jsbin.com/zoluge/1/edit?html,output
上記のサンプルページのコード：
$(document).ready(function() {
$('#nonStopAnimation').click(nonStopAnimation);
$('#stopAnimationQueue').click(function() {
//By default all animation for particular 'selector'
//are queued in queue named 'fx'.
//By clearning that queue, you can stop the animation.
$('#box').queue('fx', []);
});
$('#addAnimation').click(function() {
$('#box').queue(function() {
$(this).animate({ height : '-=25'}, 2000);
//De-queue our newly queued function so that queues
//can keep running.
$(this).dequeue();
});
});
$('#stopAnimation').click(function() {
$('#box').stop();
});
setInterval(function() {
$('#currentQueueLength').html(
'Current Animation Queue Length for #box ' +
$('#box').queue('fx').length
);
}, 2000);
});
function nonStopAnimation()
{
//These multiple animate calls are queued to run one after
//the other by jQuery.
$('#box').animate({ left: '+=500'}, 4000);
$('#box').animate({ top: '+=500'}, 4000);
$('#box').animate({ left: '-=500'}, 4000);
$('#box').animate({ top: '-=500'}, 4000, nonStopAnimation);
}さて、あなたは尋ねるかもしれません、なぜ私はこのキューに悩む必要がありますか？通常、あなたはしません。しかし、制御したい複雑なアニメーションシーケンスがある場合は、キュー/デキューメソッドが役立ちます。
複雑なアニメーションシーケンスの作成に関するjQueryグループに関する興味深い会話もご覧ください。
アニメーションのデモ：
http://www.exfer.net/test/jquery/tabslide/
まだ質問がある場合はお知らせください。
以下は、キュー内の複数のオブジェクトのアニメーションの簡単な例です。
jqueryは、1つのオブジェクトのみにキューを作成するようにしています。しかし、アニメーション関数内では、他のオブジェクトにアクセスできます。この例では、＃box1および＃box2オブジェクトをアニメーション化しながら、＃qオブジェクト上にキューを構築します。
キューは関数の配列と考えてください。したがって、キューを配列として操作できます。プッシュ、ポップ、シフト解除、シフトを使用してキューを操作できます。この例では、アニメーションキューから最後の関数を削除して、最初に挿入します。
完了したら、dequeue（）関数によってアニメーションキューを開始します。
html：
<button id="show">Start Animation Queue</button>
<p></p>
<div id="box1"></div>
<div id="box2"></div>
<div id="q"></div>js：
$(function(){
$('#q').queue('chain',function(next){
$("#box2").show("slow", next);
});
$('#q').queue('chain',function(next){
$('#box1').animate(
{left: 60}, {duration:1000, queue:false, complete: next}
)
});
$('#q').queue('chain',function(next){
$("#box1").animate({top:'200'},1500, next);
});
$('#q').queue('chain',function(next){
$("#box2").animate({top:'200'},1500, next);
});
$('#q').queue('chain',function(next){
$("#box2").animate({left:'200'},1500, next);
});
//notice that show effect comes last
$('#q').queue('chain',function(next){
$("#box1").show("slow", next);
});
});
$("#show").click(function () {
$("p").text("Queue length is: " + $('#q').queue("chain").length);
// remove the last function from the animation queue.
var lastFunc = $('#q').queue("chain").pop();
// insert it at the beginning:
$('#q').queue("chain").unshift(lastFunc);
//start animation queue
$('#q').dequeue('chain');
});css：
#box1 { margin:3px; width:40px; height:40px;
position:absolute; left:10px; top:60px;
background:green; display: none; }
#box2 { margin:3px; width:40px; height:40px;
position:absolute; left:100px; top:60px;
background:red; display: none; }
p { color:red; } アニメーションをキューに入れることができます...たとえば、これの代わりに
$('#my-element').animate( { opacity: 0.2, width: '100px' }, 2000);これは要素をフェードし、同時に幅を100ピクセルにします。キューを使用すると、アニメーションをステージングできます。したがって、一方が他方の後に終了します。
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();このスレッドは私の問題を大いに助けてくれましたが、私は$ .queueを別の方法で使用しており、ここで思いついたものを投稿したいと思いました。必要なのは、トリガーされる一連のイベント（フレーム）ですが、そのシーケンスは動的に構築されます。可変数のプレースホルダーがあり、それぞれにアニメーション化された画像シーケンスが含まれている必要があります。データは配列の配列に保持されるため、配列をループして、次のように各プレースホルダーの各シーケンスを構築します。
/* create an empty queue */
var theQueue = $({});
/* loop through the data array */
for (var i = 0; i < ph.length; i++) {
for (var l = 0; l < ph[i].length; l++) {
/* create a function which swaps an image, and calls the next function in the queue */
theQueue.queue("anim", new Function("cb", "$('ph_"+i+"' img').attr('src', '/images/"+i+"/"+l+".png');cb();"));
/* set the animation speed */
theQueue.delay(200,'anim');
}
}
/* start the animation */
theQueue.dequeue('anim');これは私が到達したスクリプトの簡略化されたバージョンですが、原理を示す必要があります-関数がキューに追加されると、関数コンストラクターを使用して追加されます-このようにして、ループの変数を使用して関数を動的に書き込むことができます（ s）。関数にnext（）呼び出しの引数が渡され、これが最後に呼び出される方法に注意してください。この場合の関数には時間依存性がないため（$ .fadeInなどを使用していません）、$。delayを使用してフレームをずらします。
機能makeRedとmakeBlack使用queue、およびdequeue相互の実行。その結果、「＃wow」要素が継続的に点滅します。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#wow').click(function(){
$(this).delay(200).queue(makeRed);
});
});
function makeRed(){
$('#wow').css('color', 'red');
$('#wow').delay(200).queue(makeBlack);
$('#wow').dequeue();
}
function makeBlack(){
$('#wow').css('color', 'black');
$('#wow').delay(200).queue(makeRed);
$('#wow').dequeue();
}
</script>
</head>
<body>
<div id="wow"><p>wow</p></div>
</body>
</html>