jQuery API の jQuery . queue( element [, queueName] ) は、elementに指定した要素上で実行される関数のキューを示すメソッド。
queue( [queueName] ) メソッドを使った方が便利なことが多い。
引数
- element
DOM要素。
elementに指定したDOM要素のキューを調べる。
- [queueName]
オプション。
キューを名前で指定できる。指定がない場合、デフォルトのエフェクトキューを示す。
実装例（サンプル）
実装例（サンプル）の動作について
「action」ボタンをクリックすると、オレンジ色のブロックの幅が200pxから50pxへアニメーション変化し、ボタンの右横に「Queue Length: 3」と表示する。次に、オレンジ色のブロックの幅が50pxから200pxへアニメーション変化し、ボタンの右横に「Queue Length: 2」と表示する。次に、高さが50pxから200pxへアニメーション変化し、「Queue Length: 1」と表示する。
「action」ボタンを何度かクリックすると、アニメーションがキューに蓄積されるので、「Queue Length: 」の右横の数字も増える。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
function queueLength(){
jQuery( '#jquery-api-queue-length' ) . text(
'Queue Length: ' + jQuery . queue( document.getElementById( 'jquery-api-animate' ) ) . length
);
};
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
}
)
. animate(
{
height: 200,
},
{
duration: 2000,
complete: queueLength
}
);
} );
} );
// -->
</script>
<!--
jQuery( function() {
function queueLength(){
jQuery( '#jquery-api-queue-length' ) . text(
'Queue Length: ' + jQuery . queue( document.getElementById( 'jquery-api-animate' ) ) . length
);
};
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
}
)
. animate(
{
height: 200,
},
{
duration: 2000,
complete: queueLength
}
);
} );
} );
// -->
</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>
<span id="jquery-api-queue-length"></span>
</p>
<div id="jquery-api-animate"></div>
<button id="jquery-api-animate-click">action</button>
<span id="jquery-api-queue-length"></span>
</p>
<div id="jquery-api-animate"></div>