jQuery . queue( element, queueName, newQueue )

jQuery API の jQuery . queue( element, queueName, newQueue ) は、elementに指定した要素のqueueNameのキューを、新しいキュー(newQueue)に置き換えるメソッド。

queue( [queueName,] newQueue ) メソッドを使った方が便利なことが多い。

引数

element

DOM要素。

elementに指定したDOM要素のキューを置き換える。

queueName

置き換えるキューを名前で指定。

標準のエフェクト・キューの名前は、「fx」。

newQueue

現在のキューの内容を置き換える関数の配列。

実装例(サンプル)

Queue Length:

実装例(サンプル)の動作について

  • 「action」ボタンをクリックすると、
    1. オレンジ色のブロックの幅が200pxから50pxへアニメーション変化。
    2. オレンジ色のブロックの幅が50pxから200pxへアニメーション変化。
    3. ブロックの背景色がピンク色に変化。
    4. 高さが50pxから200pxへアニメーション変化。
    5. ブロックの背景色がオレンジ色に変化。
  • アニメーション中に、「キューを空にする」ボタンをクリックすると、キューを空にする。実行中のアニメーションが終わると停止する。「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
                }
            )
            . queue( function() {
                jQuery( this ) . css( { backgroundColor: 'pink' } ) . dequeue();
            } )
            . animate(
                {
                    height: 200,
                },
                {
                    duration: 2000,
                    complete: queueLength
                }
            )
            . queue( function() {
                jQuery( this ) . css( { backgroundColor: 'orange' } ) . dequeue();
            } );
    } );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, Utilities, データ タグ: パーマリンク