jQuery API の finish( [queueName] ) は、マッチした要素における、引数「queueName」に指定した名前のキューの全てのアニメーションを、途中で停止し、全てのアニメーションが完了した状態にするメソッド。
記述方法（構文）
キュー指定なし
jQuery( セレクター ) . finish();
「セレクター」にマッチした要素における、デフォルトのエフェクトキューの全てのアニメーションを、途中で停止し、全てのアニメーションが完了した状態にする。
キューを指定
jQuery( セレクター ) . finish( キュー名 );
「セレクター」にマッチした要素における、引数「キュー名」に指定した名前のキューの全てのアニメーションを、途中で停止し、全てのアニメーションが完了した状態にする。
引数
- queueName / キュー名
オプション。
対象キューの名前の文字列を指定できる。指定がない場合、デフォルトのエフェクトキューを対象とする。
実装例（サンプル）
実装例（サンプル）について
「finish()」と「stop( true, true )」の違いに注目。
実装例（サンプル）の動作について
- 「action」ボタンをクリックすると、オレンジ色のブロックの幅が50pxから200pxへアニメーション変化し、次に、高さが50pxから200pxへアニメーション変化する。
- 「stop()」ボタンをクリックすると、現在実行中のアニメーションを停止し、次のアニメーションがあれば実行する。
- 「stop( true, false )」ボタンをクリックすると、現在実行中のアニメーションを停止し、次のアニメーションがあっても実行しない。
- 「stop( false, true )」ボタンをクリックすると、現在実行中のアニメーションを停止し、瞬時に、現在のアニメーションが完了した状態にし、次のアニメーションがあれば実行する。
- 「stop( true, false )」ボタンをクリックすると、現在実行中のアニメーションを停止し、瞬時に、現在のアニメーションが完了した状態にし、次のアニメーションがあっても実行しない。
- 「finish()」ボタンをクリックすると、現在実行中のアニメーションを停止し、瞬時に、全てのアニメーションが完了した状態にする。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-animate-action' ) . click( function() {
jQuery( '#jquery-api-animate' )
. clearQueue()
. stop()
. css(
{
width: 50,
height: 50,
}
)
. animate(
{
width: 200,
},
{
duration: 2000,
}
)
. animate(
{
height: 200,
},
{
duration: 2000,
}
);
} );
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-finish' ) . click( function() {
jQuery( '#jquery-api-animate' ) . finish();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-animate-action' ) . click( function() {
jQuery( '#jquery-api-animate' )
. clearQueue()
. stop()
. css(
{
width: 50,
height: 50,
}
)
. animate(
{
width: 200,
},
{
duration: 2000,
}
)
. animate(
{
height: 200,
},
{
duration: 2000,
}
);
} );
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-finish' ) . click( function() {
jQuery( '#jquery-api-animate' ) . finish();
} );
} );
// -->
</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-action">action</button></p>
<p><button id="jquery-api-stop">stop()</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>
<p><button id="jquery-api-finish">finish()</button></p>
<div id="jquery-api-animate"></div>
<p><button id="jquery-api-stop">stop()</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>
<p><button id="jquery-api-finish">finish()</button></p>
<div id="jquery-api-animate"></div>