jQueryのhoverイベントで狂ったようにアニメーションするのを止める方法

Cursorslide

jQueryって慣れてくるとCSSよりも信頼して使えると思ってます。
CSSだと例えば　” first-child”　とかで指定すると IE8なんかでは無視されてレイアウトグチャったりしますが、jQueryだとちゃんとfirst-childしてくれます。クロスブラウザってやつですね。

他にも子要素に span とか em とか blockquote とか strong とか何やかんやあると、CSSだと接頭に親要素を毎回記述するのがめんどうです。
でもjQueryなら子要素を色々と指定する場合なんかも変数でサクサクできます。

なんでもかんでもCSSでできることをjQueryにやらせるのは読み込み速度なんかに影響しそうでアレですが、ちょっとCSSで困ったり、本来要らない要素をHTMLに無駄に組み込んだりするくらいなら最近は潔くjQueryにおまかせしております。

しかし、そんな便利jQueryでもCSSに圧倒的に敵わない箇所(と自分は思ってる)が、hoverイベントです。

hoverの書き方の違い

サンプル

サンプルです

CSS版

[css]

#hoge a:hover {
background-color: black;
color: white;
}

[/css]

jQuery版

[javascript]

jQuery("#hoge").hover(function(){
jQuery(this).css({"backgroundColor":"black", "color":"white"});
},function(){
jQuery(this).css({"backgroundColor":"white", "color":"black"});
});

[/javascript]

サンプルのボタンにホバーしてみてください。色が変わるだけのありふれたボタンです。

こういったことをhoverで処理することは多いと思います。
CSSならhoverしたあとの処理 (背景色や文字色など) を指定するだけなので楽チンです。ですが、jQueryだとhoverしたあとの処理を書いたあとに、要素がマウスから離れてからの処理も記述しないといけません。

もし書き忘れたらこうなります。

サンプル

CSS版

サンプル1
サンプル2
サンプル3
サンプル4

jQuery版

サンプル1
サンプル2
サンプル3
サンプル4

[javascript]

jQuery("#hoge li").hover(function(){
jQuery(this).css({"backgroundColor":"black", "color":"white"});
});

[/javascript]

黒くなったら戻らなくなります。ちゃんと元にもどすやり方も記述しないといけません。
CSSならわざわざこんなことしなくてもよかったのに、面倒です。
なので基本 ” hover ” はCSSで書いてました。ラクしたい派なので。

本題: 狂ったアニメーション

長くなりましたが、ここからが本題です。すみません。

上記の程度であればもちろんCSSで問題はないのですが、ここにアニメーションが絡むとCSSでは厳しくなります。CSS3を使用して出来る事も増えてきていますが、それではIEは置き去りです。IEでも動かしてあげましょう。

サンプル

サンプル1
- これは
- IEでも
- 動きますよ
サンプル2
- これは
- IEでも
- 動きますよ
サンプル3
- これは
- IEでも
- 動きますよ
サンプル4
- これは
- IEでも
- 動きますよ

[javascript]

jQuery("#hoge>li").hover(function(){
jQuery(this).find("ul").slideDown();
},function(){
jQuery(this).find("ul").slideUp();
});

[/javascript]

はい。一見ふつうのプルダウン式のメニューに見えます。ですが、メニューあたりをマウスでビュンビュン左右にゴシゴシしてみてください。
わかりづらいので画像で。こんなかんじです。

Cursorslide

そうすると狂ったようにアニメーションをし続けます。マウスオーバーとマウスアウトした回数分をキッチリとアニメーションしてくれるようです。たまりません。

たったこれだけ！魔法の .stop() !!

stop()　を~~つけるだけで解決します。激シンプルです。~~

※ ブログ上のサンプルの挙動がおかしかったので修正しました。

[javascript highlight=”3″]

jQuery("#hoge ul").hide();
jQuery("#hoge>li").hover(function(){
jQuery(this).find("ul").stop().slideDown();
},function(){
jQuery(this).find("ul").stop().slideUp();

[/javascript]