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

cursorslide.jpg

こんにちは! 今日は久々にプロレス生観戦してきました! いわだて (@dutchisover) です!DDTです!飯伏ぃ...

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版

jQuery版

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

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

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

サンプル

CSS版

jQuery版

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

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

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

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

サンプル

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

Cursorslide

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

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

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

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

サンプル

はい。これだけです。もう狂ったようにワタワタワタしなくなりました。

注意点としては、アニメーションを止める要素の指定を間違えないようにすること。今回はulにulを入れ子にしているため、入れ子側のulのみを指定してます。誤ってliや最初のulを指定してしまうともちろん狂ったまま止まりませんので。

これはhoverだけではなく、他のアニメーションでも有効です。意図せず連続してアニメーションしてしまうときに試してみてください。

最近の記事

Sponsored