queue( [queueName] )

jQuery API の queue( [queueName] ) は、指定した要素上で実行される関数のキューを示すメソッド。

引数

[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( '#jquery-api-animate' ) . queue() . 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>

HTML

<p>
    <button id="jquery-api-animate-click">action</button>
    <span id="jquery-api-queue-length"></span>
</p>
<div id="jquery-api-animate"></div>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, Utilities, エフェクト, カスタム, データ タグ: パーマリンク