jQuery入門講座使い方-stopメソッド(2)

stopメソッド(2)

残りのアニメをキャンセル

stopメソッドは以下の様に２つの引数を設定できます。引数に設定できる値はブーリアン（true/false）だけで、省略された場合はfalseの設定となります。

stopメソッドの構文: $(セレクタ).stop(残りのアニメ処理, 目的地へ移動)
・残りのアニメ処理：trueの場合、予定されている残りのアニメをキャンセルします。
・目的地へ移動：trueの場合アニメを停止し、直ちに目的地に移動します。

それぞれの機能は分かりにくいので、サンプルで確認していきましょう。サンプル（03/07_01.html）を開いてください。このサンプルは開くと同時にオレンジ色のdiv領域が、３秒かけて横に300px移動した後、3秒かけて下に300px移動します（下記の２〜３行目で設定）。

$(function () {	
	$("#animeTarget").animate({left: "300px"},3000);
	$("#animeTarget").animate({top: "300px"},3000);
	
	$("#animeButton").click(function(){
		$("#animeTarget").stop(false);
	});
});

アニメを確認したらブラウザをリロードし、横に移動を開始したら青いdiv領域をクリックして下さい。このサンプルでは上記のようにstopメソッドにfalseが設定されています。falseが設定されている場合は、現在のアニメだけを停止します。そのため、横移動をすぐに停止し、縦の移動に入ります。引数を省略するとfalseと同じになるので、省略した場合もこのサンプルと同じ仕様になります。

サンプル（03/07_02.html）を開いてソースを確認して下さい。アニメの処理は同じですが、；以下の様にstopメソッドの引数にtrueが設定されています。確認したらブラウザの読込ボタンをクリックし、横に移動を開始したら、すぐに青いdiv領域をクリックして下さい。このようにstopメソッドの第１引数にtrueが設定されていると、残りのアニメはキャンセルされるため完全に停止します。

$("#animeButton").click(function(){
	$("#animeTarget").stop(true);
});

停止後、目的地に移動する

２つめの引数を確認しましょう。サンプル（03/07_03.html）を開いてください。アニメの設定は変わりませんが、stopメソッドの第２引数が設定されています。このサンプルはfalseに設定してあるので、機能的にはサンプル03/07_01.htmlと同じになります。

続いてサンプル（03/07_04.html）を開いてjQueryを確認してください。以下の様にstopメソッドの第２引数がtrueに設定されています。次にブラウザをリロードして、横に移動している間にボタンをクリックして止めて下さい。ボタンをクリックした瞬間に横移動のゴール地点（300px）に移動してから、次のアニメが開始されます。

$("#animeButton").click(function(){
	$("#animeTarget").stop(false,true);
});

このように第２引数をtrueにすると、アニメを停止し直ちに目的地に移動するようになります。途中でアニメが停止してしまうと演出の辻褄が合わなくなるような場合に利用します。

両方ともtrueにすると

最後に引数を両方ともtrueに下サンプルを紹介します。実際に確認する前に、どのようになるか想像して下さい。第１引数がtrueなので、クリックされたら残りのアニメも含めて停止します。そして第２引数もtrueなので、現在のアニメのゴール地点に移動するはずです。サンプル（03/07_05.html）を開いてください。

横に移動している間にボタンをクリックすると、停止しゴール地点に移動します。勘違いしやすいのは、最終地点であるＹ座標も300px移動した地点に移動するわけではない点です。第１引数のtrueで残りのアニメはキャンセルされ存在していないことになるのです。

stopメソッドの引数を説明しましたが、大抵の場合は引数を省略したデフォルトの設定でしか利用しないでしょう。もしデフォルトの設定で都合悪いケースに遭遇したら、今回のことを思い出してください。次回はアニメを管理する仕組みqueue（キュー）について説明します。

次のページ：queueについて