初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
Core：コアとなる仕組み
Selectors：セレクタ
Attributes：属性
Traversing：対象の変更
Manipulation：操作
CSS：スタイルシート
Events：イベント
Effects：演出効果
Ajax：xml等との連携
Utilities：ユーティリティ
Data：データ
Miscellaneous：諸々
Deferred：処理管理
Callbacks：コールバック
Internals：内部処理

.finish( )すべてのアニメーションを終了しゴールに移動する

構文

すべてのアニメーションを終了しゴールに移動する返値：jQueryオブジェクト
jQo.finish( [キューの名前] )ver1.9〜

機能

jQueryオブジェクトで指定した要素のアニメーションをすべて終了し最終的な目的地に移動します。引数にキューの名前を指定して、特定のキューを操作する事ができます。

解説

stopと似ていますが

finishメソッドはstopメソッドと似ており「アニメが1つの時」はstopメソッドで第2引数（ゴールに移動）をtrueにした時と同じ動作になります。

サンプル（finish/01.html）を開いてbodyの構成にdiv要素とbutton要素が2つ（id属性がstartとstop）あることを確認してください。jQueryは以下の様に記述され、まずid属性がstartのbuttonがクリックされたらアニメを実行します。 

$("button#start").click(function(){
	$("div").animate({left:300}, 3000);
});
$("button#stop").click(function(){
	$("div").stop(false,true);
});

実際にstartボタンをクリックして、アニメが終わる前にstopボタンをクリックしてください。stopメソッドの第2引数がtrueになっているため、アニメを停止してゴールに移動します。

アニメが1つの場合はfinishメソッドも同じ動作になります。サンプル（finish/01b.html）を開いてbodyの構成がstopボタンの代わりにfinsihボタンになっていることを確認して下さい。jQueryは以下の様にstopメソッドの代わりにfinshメソッドが利用されています。 

$("button#finish").click(function(){
	$("div").finish();
});

finish/01.htmlと同じようにstartボタンをクリックして、アニメが終わる前にfinishボタンをクリックしてください。同じように停止してゴールに移動します。ではfinishメソッドが、どのようにstopメソッドと異なるかを次項で確認します。

複数のアニメをまとめて停止する

finishメソッドの真骨頂は複数のアニメをまとめて終了することです。サンプル（finish/02.html）を開いてbody内の構成はfinish/01b.htmlと同じ事を確認して下さい。

jQueryでは、まず以下のstartボタンをクリックした時の処理を確認して下さい。アニメが3つ登録されています。実際にstartボタンをクリックして3つのアニメが順に再生されることを確認して下さい。 

$("button#start").click(function(){
	$("div").animate({left:300}, 1000);
	$("div").animate({top:300}, 1000);
	$("div").animate({left:0}, 1000);
});

finishボタンの処理は以下の様にfinish/01b.htmlから変更はありません。 

$("button#finish").click(function(){
	$("div").finish();
});

ではサンプル（finish/02.html）をリロードして元の状態に戻し、もう一度startボタンをクリックしてください。そして最初のアニメが終わる前にfinishボタンをクリックして下さい。すべてのアニメが終了し、最終的なゴールに移動します。

比較のためstopメソッドを利用したサンプルを用意しました。サンプル（finish/02b.html）を開いてstopボタンの処理が以下の様に変更されているのを確認して下さい。 

$("button#stop").click(function(){
	$("div").stop(true,true);
});

stopメソッドの2つの引数にtrueを設定しています。同じように最初のアニメが終わる前にstopボタンをクリックすると目的地に移動しますが、最初のアニメの目的地で、最終的なゴールではありません。stopメソッドは「現在のアニメ」に対してしか処理しないのです。

ついでにstopメソッドの引数を(false,true)にしたサンプル（finish/02c.html）も用意しました。このサンプルでは、現在のアニメだけを停止し、残りのアニメは通常通りに実行されます。本家サイトのサンプル（最下段）でfinishメソッドと様々な設定のstopメソッドを比較できるので確認してみて下さい。

メモ

queueで追加された処理は無視します

色々サンプルを作成していて気が付いたのですが、finishメソッドはqueueメソッドで追加した処理は無視するようです。サンプル（finish/test01.html）を開いてjQueryが以下の様に変更されているのを確認して下さい。 

$("button#start").click(function(){
	$("div").animate({left:300}, 1000);
	$("div").animate({top:300}, 1000);
	$("div").queue(function(){
		$("div").css({backgroundColor:"pink"});
		$("div").dequeue();
		$("div").animate({left:0}, 1000);
	});
});

ポイントは上記赤字のqueueメソッドで追加した処理です。このサンプルでは背景色をピンクにしてから左に移動するようにしています。この処理の説明はqueueメソッドで詳しくしています。

このサンプルにもfinishボタンが付いているので、最初のアニメが終わる前にクリックして下さい。2,3行目の処理は実行されますが、queueメソッドで追加した処理は実行されません。

ついでにもう１つサンプルを作成しました。サンプルfinish/test01b.html）では下記のようにqueueメソッド内のアニメを外に出してみました。 

$("button#start").click(function(){
	$("div").animate({left:300}, 1000);
	$("div").animate({top:300}, 1000);
	$("div").queue(function(){
		$("div").css({backgroundColor:"pink"});
		$("div").dequeue();
	});
	$("div").animate({left:0}, 1000);
});

結果として、queueメソッドの外に出した8行目の処理はfinishメソッドによって終了されます。なので、やはりqueueメソッドで追加した処理はfinishメソッドでは処理されないようです。