jQueryのstopメソッドとfinishメソッド

このエントリーはjQuery Advent Calendar 2013の 3日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。)

3日目はアニメーションの制御に利用するjQueryのstopメソッドとfinishメソッドについて解説します。

アニメーションの基本

jQueryのアニメーションはキューと呼ばれるものに格納されます。たとえば次のように4つのアニメーションを指定した場合、それぞれキューに格納され、最初のアニメーションが終了した場合に次のアニメーションが、さらに終了した際に次のアニメーションがといった具合に実行されていきます。

$("div").animate({
	left:100
}).animate({
	top:100
}).animate({
	left:0
}).animate({
	top:0
});

サンプル1

stopメソッド

stopメソッドはその名のとおりアニメーションをストップさせる為のメソッドです。

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

サンプル2

このようにstopメソッドは実行された際に動いているキューのアニメーションのみを中止つぎのキューのアニメーションが実行されます。

引数にtrueを指定するとアニメーションを終了させキューを破棄することもできます。

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

サンプル3

第2引数にtrueを指定するとアニメーションを終了させ、アニメーション終了時の状態にすることができます。

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

サンプル4

finishメソッド

finishメソッドはjQuery 1.9で追加された新しいメソッドです。アニメーションを終了させ、キューを破棄し、最後のキューまで実行された状態にすることができます。

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

サンプル5

ちょっと似たようなメソッドですが微妙に使い勝手が違うので注意して利用してください。

あと、jQuery Advent Calendar 2013はまだ空きがあるので興味がある人はjQueryについて何か書いてみませんか?

関連エントリー

jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
14のjQueryベストプラクティス
8のjQueryのすごいTIPS
Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

スポンサードリンク

«jQueryのmouseoverメソッドとmouseenterメソッドの違い | メイン | jQueryのpropメソッドとattrメソッド»