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

.stop( )アニメーションを停止する

構文

アニメーションを停止する返値：jQueryオブジェクト
jQo.stop( [キューのクリア] [,ゴールに移動] )ver1.2〜
jQo.stop( キューの名前 [,キューのクリア] [,ゴールに移動] )ver1.7〜

機能

jQueryオブジェクトで指定した要素のアニメーションを停止します。

引数[キューのクリア]にtrueを設定すると、キューに登録されている他のアニメが消されるため、以降のアニメも実行されません。この引数を省略した場合はfalseが設定され、現在のアニメだけ停止し、すぐに次のキューのアニメを実行します（キューについてはanimateメソッドで説明しています）。

引数[ゴールに移動]にtrueを設定すると、瞬時にゴール地点に移動します。この引数を省略した場合はfalseが設定され、stopメソッドが実行された地点で停止します。

v1.7からは第1引数にキューの名前を指定して、特定のキューを操作する事ができます。

解説

サンプルアニメの説明

まずはstopメソッドの機能を説明するために用意したanimateメソッドのサンプルを説明します。
サンプル（stop/01.html）を開いてbodyの構成にdiv要素とbutton要素があることを確認してください。button要素にはstartとid属性を設定しています。

jQueryは以下の様に記述され、まずid属性がstartのbuttonがクリックされたら2つのアニメを順に実行します。 

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

結果として、buttonクリックするとdiv要素が右に移動し、その次に下に移動します。jQueryのアニメはキューで管理されるため、一度に実行されるのではなく、このように1つずつ順に再生します。

引数無しで利用する

stopメソッドは引数なしで利用すると、現在再生しているアニメを停止し次のアニメを実行します。
サンプル（stop/02.html）を開いてbody内にid属性がstopのbutton要素が追加されたのを確認して下さい。

jQueryはid属性がstopのbutton要素がクリックされた時の処理が追加されています。stopメソッドは以下の様に引数を設定していません。 

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

startボタンをクリックしたら、最初のアニメ（左に移動するアニメ）が完了する前にstopボタンをクリックしてください。右に行くアニメを停止し、すぐに下に行くアニメを再生します。

キューを消す

[キューのクリア]の引数にtrueを設定すると、キューに登録されている他のアニメを削除し、ただちに停止します。サンプル（stop/03.html）を開いてbody内の構成はstop/02.htmlと同じを確認して下さい。

jQueryもほとんど同じで、以下の様にstopメソッドの引数にtureが追加されているだけです。 

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

結果として、最初のアニメ（左に移動するアニメ）が完了する前にstopボタンをクリックすると左への移動を停止し、次に実行するはずのアニメ（下に行くアニメ）も実行されません。これはキューにある残りのアニメが削除されるためです。

ゴールに移動

[ゴールに移動]の引数にtrueを設定すると、アニメを停止しゴールに移動します。サンプル（stop/04.html）を開いてbody内の構成はstop/03.htmlと同じを確認して下さい。

jQueryもほとんど同じで、以下の様にstopメソッドの第2引数にtureが追加されているだけです。 

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

結果として、最初のアニメ（左に移動するアニメ）が完了する前にstopボタンをクリックすると左への移動を停止し、ただちにゴール地点に移動します。

もしキューを削除したくない場合は、第1引数のtrueをfalseにします。サンプル（stop/04b.html）を開いてjQueryが以下の様に変更されているのを確認して下さい。 

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

結果として、最初のアニメ（左に移動するアニメ）が完了する前にstopボタンをクリックするとゴール地点に移動したのち、下に移動するアニメが再生されます。ゴールまで移動しないと演出的に辻褄が合わなくなるような場合に利用するのだと思います。

メモ

トグル系のアニメでの利用について

本家のページによると、v1.7以前はtoggle系のメソッドでstopメソッドを利用すると正常に機能しないことがあったようです。 v1.7以降では問題は解決されているそうなのですが、予想外の仕様なのでメモしておきます。

サンプル（stop/test01.html）を開いてbody内の構成はstop/04.htmlと同じを確認して下さい。しかしjQueryは変更され、以下の様にstartボタンをクリックするとslideToggleメソッドによって隠したり表示した表示するようになっています。 

$("button#start").click(function(){
	$("div").slideToggle(3000);
});

stopメソッドに関しては、以下の様に引数を利用していません。 

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

私が予想外だったのは、startボタンをクリックして「隠している途中」でstopボタンをクリックして停止し、再びstartボタンをクリックすると「隠すアニメを再開」することです。トグルなので、隠すのと表示するのは交互に実行されるものと考えていたので...。

逆に「表示している途中」でstopボタンをクリックして停止し、再びstartボタンをクリックすると、ここでは私の考え通り「隠すアニメに切り替わり」ます。

なんだか統一感のない仕様だなと思っていたのですが、これはトグル系のメソッドが次の様な仕様になっていると考えると理解できました。

トグル系のメソッドは「表示されている時は隠す」「隠れている時は表示する」という仕様になっており、途中でアニメが停止されていようといまいと、実行時点で表示されていたら隠す方向にアニメするのです。

キューの名前について

v1.7から利用できるキューの名前ですが、そもそもキューに名前を付ける方法が分かりません。本家ページには説明もサンプルもないし...。もし分かったら、このページを更新しようと思います。