stop( [queueName][, clearQueue][, jumpToEnd] )

jQuery API の stop( [queueName][, clearQueue][, jumpToEnd] ) は、引数「queueName」に指定した名前のキューのアニメーションを途中で停止するメソッド。キューに次のアニメーションがあり、引数「clearQueue」が「false」の場合、次のアニメーションを実行する。

記述方法(構文)

jQuery( セレクター ) . stop( [キュー名][, キュー内アニメーションを削除するかどうか][, アニメーション完了状態にするかどうか] )

「セレクター」にマッチしたDOM要素における、「キュー名」に指定した名前のキューのアニメーションを途中で停止する。

引数

queueName / キュー名

オプション。

対象キューの名前の文字列を指定できる。指定がない場合、デフォルトのエフェクトキューを対象とする。

clearQueue

オプション。

キューに入っているアニメーションを削除するかどうかを、ブーリアン(論理型)で指定することができる。

デフォルト値は、false。

true を設定すると、キューに入っているアニメーションを削除する。

jumpToEnd

オプション。

現在のアニメーションが完了した状態にするかどうかを、ブーリアン(論理型)で指定することができる。

デフォルト値は、false。

true を設定すると、現在のアニメーションが完了した状態にする。

引数「clearQueue」と「jumpToEnd」の処理に関する詳しいサンプルは、「stop( [clearQueue,] [jumpToEnd] )」のページにて。

実装例(サンプル)

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

  • 「action」ボタンをクリックすると、オレンジ色のブロックの幅が50pxから200pxへ、高さが50pxから200pxへアニメーション変化する。
  • 「stop( “queueNameA” )」ボタンをクリックすると、幅が50pxから200pxへ拡大するアニメーションを途中で停止する。
  • 「stop( “queueNameB” )」ボタンをクリックすると、高さが50pxから200pxへ拡大するアニメーションを途中で停止する。

実装例(サンプル)のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-api-stop-queueNameA' ) . click( function() {
            jQuery( '#jquery-api-animate' ) . stop( "queueNameA" );
    } );
    jQuery( '#jquery-api-stop-queueNameB' ) . click( function() {
            jQuery( '#jquery-api-animate' ) . stop( "queueNameB" );
    } );
    jQuery( '#jquery-api-animate-click' ) . click( function() {
        jQuery( '#jquery-api-animate' )
            . css(
                {
                    width: 50,
                    height: 50,
                }
            )
            . animate(
                {
                    width: 200,
                },
                {
                    duration: 2000,
                    queue: "queueNameA",
                }
            )
            . dequeue( "queueNameA" )
            . animate(
                {
                    height: 200,
                },
                {
                    duration: 2000,
                    queue: "queueNameB",
                }
            )
            . dequeue( "queueNameB" );
    } );
} );
// -->
</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></p>
<p><button id="jquery-api-stop-queueNameA">stop( "queueNameA" )</button></p>
<p><button id="jquery-api-stop-queueNameB">stop( "queueNameB" )</button></p>
<div id="jquery-api-animate"></div>

スポンサード リンク

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