jQuery API の jQuery . queue( element, queueName, callback() ) は、elementに指定した要素のqueueNameのキューに関数を追加するメソッド。
queue( [queueName,] callback( next ) ) メソッドを使った方が便利なことが多い。
引数
- element
DOM要素。
関数を追加したいキューのDOM要素。
- queueName
関数を追加するキューを名前で指定。
標準のエフェクト・キューの名前は、「fx」。
- callback()
キューに追加する関数。
記述方法
jQuery . queue( DOM要素, キュー名, コールバック関数 )
「DOM要素」に指定した要素の「キュー名」のキューに「コールバック関数」を追加する。
記述例
jQuery . queue( document.getElementById( 'sample' ), 'fx', function() {
jQuery( this ) . css( { backgroundColor: 'red' } );
} );
jQuery( this ) . css( { backgroundColor: 'red' } );
} );
idが「sample」の要素の、キュー名が「fx」のキューに、背景色を赤色にする関数を追加。
実装例（サンプル）
Queue Length:
実装例（サンプル）の動作について
- 「action」ボタンをクリックすると、
- オレンジ色のブロックの幅が200pxから50pxへアニメーション変化。
- オレンジ色のブロックの幅が50pxから200pxへアニメーション変化。
- ブロックの背景色がピンク色に変化。
- 高さが50pxから200pxへアニメーション変化。
- ブロックの背景色がオレンジ色に変化。
- アニメーション中に、「キューを空にする」ボタンをクリックすると、キューを空にする。実行中のアニメーションが終わり次第、停止し、残りのアニメーションは実行しない。「Queue Length: 」の右横の数字は、「0」になる。
- 「action」ボタンを何度かクリックすると、アニメーションがキューに蓄積されるので、「Queue Length: 」の右横の数字も増える。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
function queueLength(){
jQuery( '#jquery-api-queue-length' ) . text(
jQuery . queue( document.getElementById( 'jquery-api-animate' ) ) . length
);
};
jQuery( '#jquery-api-animate-click-2' ) . click( function() {
jQuery . queue( document.getElementById( 'jquery-api-animate' ), 'fx', [] );
} );
jQuery( '#jquery-api-animate-click' ) . click( function() {
jQuery( '#jquery-api-animate' )
. animate(
{
width: 50,
height: 50,
},
{
duration: 1000,
complete: queueLength
}
)
. animate(
{
width: 200,
},
{
duration: 2000,
complete: queueLength
}
);
jQuery . queue( document.getElementById( 'jquery-api-animate' ), 'fx', function() {
jQuery( this ) . css( { backgroundColor: 'pink' } );
jQuery . dequeue( this, 'fx' );
} );
jQuery( '#jquery-api-animate' )
. animate(
{
height: 200,
},
{
duration: 2000,
complete: queueLength
}
);
jQuery . queue( document.getElementById( 'jquery-api-animate' ), 'fx', function() {
jQuery( this ) . css( { backgroundColor: 'orange' } );
jQuery . dequeue( this, 'fx' );
} );
} );
} );
// -->
</script>
<!--
jQuery( function() {
function queueLength(){
jQuery( '#jquery-api-queue-length' ) . text(
jQuery . queue( document.getElementById( 'jquery-api-animate' ) ) . length
);
};
jQuery( '#jquery-api-animate-click-2' ) . click( function() {
jQuery . queue( document.getElementById( 'jquery-api-animate' ), 'fx', [] );
} );
jQuery( '#jquery-api-animate-click' ) . click( function() {
jQuery( '#jquery-api-animate' )
. animate(
{
width: 50,
height: 50,
},
{
duration: 1000,
complete: queueLength
}
)
. animate(
{
width: 200,
},
{
duration: 2000,
complete: queueLength
}
);
jQuery . queue( document.getElementById( 'jquery-api-animate' ), 'fx', function() {
jQuery( this ) . css( { backgroundColor: 'pink' } );
jQuery . dequeue( this, 'fx' );
} );
jQuery( '#jquery-api-animate' )
. animate(
{
height: 200,
},
{
duration: 2000,
complete: queueLength
}
);
jQuery . queue( document.getElementById( 'jquery-api-animate' ), 'fx', function() {
jQuery( this ) . css( { backgroundColor: 'orange' } );
jQuery . dequeue( this, 'fx' );
} );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
div#jquery-api-animate {
background-color: orange;
height: 200px;
width: 200px;
}
-->
</style>
<!--
div#jquery-api-animate {
background-color: orange;
height: 200px;
width: 200px;
}
-->
</style>
HTML
<p>
<button id="jquery-api-animate-click">action</button>
<button id="jquery-api-animate-click-2">キューを空にする</button>
</p>
<p>
Queue Length: <span id="jquery-api-queue-length"></span>
</p>
<div id="jquery-api-animate"></div>
<button id="jquery-api-animate-click">action</button>
<button id="jquery-api-animate-click-2">キューを空にする</button>
</p>
<p>
Queue Length: <span id="jquery-api-queue-length"></span>
</p>
<div id="jquery-api-animate"></div>