デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

アニメの停止

概要

アニメを途中で止める

前回の「メモ」で説明したように、jQueryのアニメはアニメが完了してからでないと次のアニメを再生しません。この仕様では都合が悪い場合があるので、ここではアニメを停止させるstopメソッドを利用して問題を回避する方法を説明します。

解説

不都合な例

マウスオーバーで演出するボタンでjQueryアニメの不都合な点を説明します。サンプル(stop/01.html)のソースを開いてbody内の構成を確認してください。id属性がgaugeのdiv要素は幅を確認するためのdiv要素で、id属性がanimeTargetのdiv要素はマウスオーバーで操作するdiv要素です。

<div id="gauge">300px</div>
<div id="animeTarget"></div>

jQueryは以下の様に「初歩的なサンプル」で紹介したhoverメソッドを利用してオレンジ色のdiv領域(id属性animeTarget)にマウスオーバーしたらbigFuncを実行して幅を300pxに伸ばし、マウスアウトしたらsmallFuncを実行して幅が100pxに戻すようにしました。

function bigFunc() {
	$(this).animate({width: "300px"});
}
function smallFunc() {
	$(this).animate({width: "100px"});
}	
$(function () {	
	$("#animeTarget").hover(bigFunc, smallFunc);			
});

オレンジのdiv領域の上には幅が確認しやすいように300px幅のグレーのdiv領域(idはgauge)を用意しています。このサンプルでは、マウスオーバーの後ですぐにマウスアウトしても、オレンジのdiv領域は必ず300pxの幅になってから元に戻ることを確認してください。

それだけなら問題はないのですが、素早く何度も連続してマウスオーバー/マウスアウトを繰り返して下さい。すると操作を止めてもしばらくはアニメが停止しません。これはマウスオーバーとマウスアウトが発生した回数だけ律儀にアニメを実行するためです。これでは困るのでアニメを停止する処理を追加します。

アニメを停止するstopメソッド

この問題を回避するためには新たなアニメを実行する前に、現在実行しているアニメを停止させます。そしてアニメの停止に利用するのがstopメソッドです。

サンプル(stop/02.html)のソースを確認してstop/01.htmlとほとんど同じ事を確認して下さい。異なるのは、以下の様にanimateメソッドを利用する前にstopメソッドを書いる点だけです。これにより現在実行しているアニメをすぐに停止し、次の行のanimateメソッドを実行するようになります。

そのため、マウスオーバーしてすぐにマウスアウトすると、300pxの幅に行く前に100pxに戻るアニメになります。オレンジ色のdiv領域で素早くマウスオーバー/マウスアウトを繰り返しても。サンプルstop/01.htmlのようにならないことを確認してください。

function bigFunc() {
	$(this).stop();
	$(this).animate({width: "300px"});
}
function smallFunc() {
	$(this).stop();
	$(this).animate({width: "100px"});
}

このようにアニメをすぐに止めたい場合は、stopメソッドを利用してください。先の項目で学ぶ「メソッドチェーン」を利用するとソースを短く書くことができます。

メソッドチェーンを利用すると共通のjQueryオブジェクトにメソッドを連結して設定できます。
サンプル(stop/02b.html)のソースを開いてjQueryを確認して下さい。以下の様にjQueryオブジェクトに続けてstopメソッドとanimateメソッドを連続して設定しています。

function bigFunc() {
	$(this).stop().animate({width: "300px"});
}
function smallFunc() {
	$(this).stop().animate({width: "100px"});
}

連結した順に実行されるので、現在のアニメを停止した後で次のアニメを再生します。stopメソッドは引数で別の仕様に変更することができます。あまり利用する機能ではないので省略しますが、興味のある方はリファレンスで確認して下さい。

アニメが完了してからでないと次のアニメが開始されないのは、アニメが「キュー」という仕組みで管理されているからです。次回は、この「キュー」について説明します。