jQueryでdelay, queue, dequeueを使ってみた。
忘れないようにのメモ。
delay
jQuery API: .delay()
duration: 待機時間（ミリ秒） ＊必須
queueName: queue名称（文字） ＊オプション
戻り値はjQuery Object
/** * @param {Number} duration * @param {String=fx} [queueName] optional * @returns {jQuery} */ .delay( duration [, queueName ] ) |
アニメーションを連続させる時の遅延として使えるらしい。
setTimeout の代替関数では無いと注意書きあり。
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn’t, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript’s native setTimeout function, which may be more appropriate for certain use cases.
jQuery.queue
jQuery API: queue
/** * @param {DOMElement} element * @param {String=fx} [queueName] optional * @returns {jQuery} */ jQuery.queue( element [, queueName ] ) |
Note: This is a low-level method, you should probably use .queue() instead.
low-level method なので代わりに .queue を使うらしい。
queue
jQuery API: queue
/** * @param {String=fx} [queueName] optional * @returns {Array} */ .queue( [queueName ] ) |
.queue は jQuery Object じゃなくて配列を返す。
jQueryは引数の数や型に色んなパターンが用意されていて便利そうだけど覚えるの大変。
.queueもそのひとつ。
/** * @param {String=fx} [queueName] optional * @param {Array} newQueue [Function,...] * @returns jQuery */ .queue( [queueName ], newQueue ) |
この3番目のが使いやすそう。
/** * @param {String=fx} [queueName] optional * @param {Function} callback * @returns jQuery */ .queue( [queueName ], callback( next ) ) |
メソッドチェーンするときは callback の中で dequeue するらしい。
<div id="box" style="position: absolute; background: #efefef;">Box</div> |
var $box = $( "#box" ); $box.delay( 1000 ) .queue( function (){ $box.css( { width: "100px", height: "100px", backgroundColor: "#f00" } ).dequeue(); } ) .delay( 500 ) .animate( { top: "100px", left: "500px" }, { duration: 1000, complete: function (){ console.log( "complete pos" ); } } ); |
CSS class を付与した後遅延してアニメーションする時とかに使えそう。
dequeue
$.dequeue( this ); |
こんな感じでもいいのネ。
今さらながらjQueryは奥深い。