概要アニメを途中で止める前回の「メモ」で説明したように、jQueryのアニメはアニメが完了してからでないと次のアニメを再生しません。stopメソッドを利用して問題を回避する方法を説明します。不都合な例マウスオーバーで演出するボタンでjQueryアニメの不都合な点を説明します。サンプル(stop/01.html)のソースを開いてbody内の構成を確認してください。id属性がgaugeのdiv要素は幅を確認するためのdiv要素で、id属性がanimeTargetのdiv要素はマウスオーバーで操作するdiv要素です。hoverメソッドを利用してオレンジ色のdiv領域(id属性animeTarget)にマウスオーバーしたらbigFuncを実行して幅を300pxに伸ばし、マウスアウトしたらsmallFuncを実行して幅が100pxに戻すようにしました。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のようにならないことを確認してください。"100px"});}このようにアニメをすぐに止めたい場合は、stopメソッドを利用してください。先の項目で学ぶ「メソッドチェーン」を利用するとソースを短く書くことができます。メソッドチェーンを利用すると共通のjQueryオブジェクトにメソッドを連結して設定できます。サンプル(stop/02b.html)のソースを開いてjQueryを確認して下さい。以下の様にjQueryオブジェクトに続けてstopメソッドとanimateメソッドを連続して設定しています。"100px"});}連結した順に実行されるので、現在のアニメを停止した後で次のアニメを再生します。stopメソッドは引数で別の仕様に変更することができます。利用する機能ではないので省略しますが、興味のある方はリファレンスで確認して下さい。アニメが完了してからでないと次のアニメが開始されないのは、アニメが「キュー」という仕組みで管理されているからです。次回は、この「キュー」について説明します。