jQuery API の stop( [clearQueue,] [jumpToEnd] ) は、指定した要素の現在実行中のアニメーションを停止するメソッド。キューに次のアニメーションがり、オプションがデフォルト値の場合、次のアニメーションを実行する。
引数
- [clearQueue]
オプション。
キューに入っているアニメーションを削除するかどうかを、ブーリアン（論理型）で指定することができる。
デフォルト値は、false。
true を設定すると、キューに入っているアニメーションを削除する。
- [jumpToEnd]
オプション。
現在のアニメーションが完了した状態にするかどうかを、ブーリアン（論理型）で指定することができる。
デフォルト値は、false。
true を設定すると、現在のアニメーションが完了した状態にする。
実装例（サンプル）
実装例（サンプル）の動作について
- 「action」ボタンをクリックすると、オレンジ色のブロックの幅が50pxから200pxへアニメーション変化し、次に、高さが50pxから200pxへアニメーション変化する。
- 「stop( false, false )」ボタンをクリックすると、現在実行中のアニメーションを停止し、次のアニメーションがあれば実行する。
- 「stop( true, false )」ボタンをクリックすると、現在実行中のアニメーションを停止し、次のアニメーションがあっても実行しない。
- 「stop( false, true )」ボタンをクリックすると、現在実行中のアニメーションを停止し、瞬時に、現在のアニメーションが完了した状態にし、次のアニメーションがあれば実行する。
- 「stop( true, false )」ボタンをクリックすると、現在実行中のアニメーションを停止し、瞬時に、現在のアニメーションが完了した状態にし、次のアニメーションがあっても実行しない。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-stop' ) . click( function() {
jQuery( '#jquery-api-animate' ) . stop();
} );
jQuery( '#jquery-api-stop-true-false' ) . click( function() {
jQuery( '#jquery-api-animate' ) . stop( true, false );
} );
jQuery( '#jquery-api-stop-false-true' ) . click( function() {
jQuery( '#jquery-api-animate' ) . stop( false, true );
} );
jQuery( '#jquery-api-stop-true-true' ) . click( function() {
jQuery( '#jquery-api-animate' ) . stop( true, true );
} );
jQuery( '#jquery-api-animate-click' ) . click( function() {
jQuery( '#jquery-api-animate' )
. clearQueue()
. stop()
. css(
{
width: 50,
height: 50,
}
)
. animate(
{
width: 200,
},
{
duration: 2000,
}
)
. animate(
{
height: 200,
},
{
duration: 2000,
}
);
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-stop' ) . click( function() {
jQuery( '#jquery-api-animate' ) . stop();
} );
jQuery( '#jquery-api-stop-true-false' ) . click( function() {
jQuery( '#jquery-api-animate' ) . stop( true, false );
} );
jQuery( '#jquery-api-stop-false-true' ) . click( function() {
jQuery( '#jquery-api-animate' ) . stop( false, true );
} );
jQuery( '#jquery-api-stop-true-true' ) . click( function() {
jQuery( '#jquery-api-animate' ) . stop( true, true );
} );
jQuery( '#jquery-api-animate-click' ) . click( function() {
jQuery( '#jquery-api-animate' )
. clearQueue()
. stop()
. css(
{
width: 50,
height: 50,
}
)
. animate(
{
width: 200,
},
{
duration: 2000,
}
)
. animate(
{
height: 200,
},
{
duration: 2000,
}
);
} );
} );
// -->
</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">stop( false, false )</button></p>
<p><button id="jquery-api-stop-true-false">stop( true, false )</button></p>
<p><button id="jquery-api-stop-false-true">stop( false, true )</button></p>
<p><button id="jquery-api-stop-true-true">stop( true, true )</button></p>
<div id="jquery-api-animate"></div>
<p><button id="jquery-api-stop">stop( false, false )</button></p>
<p><button id="jquery-api-stop-true-false">stop( true, false )</button></p>
<p><button id="jquery-api-stop-false-true">stop( false, true )</button></p>
<p><button id="jquery-api-stop-true-true">stop( true, true )</button></p>
<div id="jquery-api-animate"></div>