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>
<!--
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>
<!--
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>
<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>