jQuery:stopメソッド！アニメーションの停止

今回は、jQueryでアニメーションをおこなう際に重要な、アニメーション停止の機能stopメソッドについて、実際にサンプルコードを用いて、詳しく記載していこうと思います。

jQueryでアニメーションを作成する際は、必ずといってイイほど必要不可欠なstop()メソッド、このstop()メソッドを記述しないと、思ったような挙動と異なるような動きになってしまうことも、あることと思いますのでしっかりと理解しておくことをオススメします。

という事で、それでは今回はッ、

・jQueryでアニメーション使用時は、繰り返しに注意！
・stop()メソッドの使い方

上記について記載していこうと思います…。

jQueryでアニメーション使用時は、繰り返しに注意！

今回は、アニメーションをイベントと組み合わせたとき（クリックやマウスオーバーなど）使うとき、とても大事な注意事項があります。

まずは、サンプルコードより

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#photo”).hover(function(){
$(this).fadeTo(“slow”, .3);
},
function(){
$(this).fadeTo(“slow”, 1);
});
});
</script>
</head>
<body>
・・省略・・
<p id=”photo”>
<img src=”images/HotSpring.jpg” alt=”敷島温泉赤城の湯ユートピア赤城”
width=”300″ height=”225″>
</p>
・・省略・・
</body>
</html>

HTMLには画像が一枚マークアップされています。jQueryでは、マウスがのったときに、fadeTo()メソッドで、不透明度「.3」にしています。マウスが外れたときには、不透明度を「1」に戻す簡単なコードです。これを下記ブラウザ上で表示してみます。

敷島温泉赤城の湯ユートピア赤城

実は、このコードには重大な問題があります。試に上記画像にマウスをのせたり外したりという動作を、素早く繰り返してみます。

すると、マウスを動かすのをやめた後でも、マウスがのったり外れた回数だけ、アニメーションがいつまでも繰り返されるのが確認できることと思います。もちろんこれは誤動作ではなく、正しい動作です。

stop()メソッドの使い方

上記の動作、実際はこれでは困ることも少なくありません。そこで今回は、stop()メソッドを併用してみます。

stop()メソッドは、現在実行中のアニメーションを強制的に終了させるメソッドです。animate()メソッドの前に付けることで、アニメーションの繰り返し、重複を防ぐことができます。

サンプルHTML2<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#photo”).hover(function(){
$(this).stop().fadeTo(“slow”, .3);
},
function(){
$(this).stop().fadeTo(“slow”, 1);
});
});
</script>
</head>
<body>
・・省略・・
<p id=”photo”>
<img src=”images/HotSpring.jpg” alt=”敷島温泉赤城の湯ユートピア赤城”
width=”300″ height=”225″>
</p>
・・省略・・
</body>
</html>

アニメーションメソッドであるfadeTo()の前に、stop()メソッドを追加しました。stop()メソッドは、アニメーションを強制的に停止してくれるので、一度動作中のアニメーションを終了させてから、次のアニメーションを開始します。そのため初めのサンプルHTMLのように、なんども繰り返されることはなくなります。

敷島温泉赤城の湯ユートピア赤城

という事で今回は、jQuery:stopメソッド！アニメーションの停止について、サンプルコードを交え記載してみました。

jQueryでアニメーション効果を記述する際は、ぜひ覚えておきたいstop()メソッド。記述方法もメソッドチェーンで付け加えるだけなので、比較的簡単なことと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。