jQuery UI の effect と hover を組み合わせて使う時のコツ

木曜日, 1月 30th, 2014

こんにちは、なかわけです。

jQuery UI の effect の shake (または bounce)とhover (または mouseover)を組み合わせて使う時のコツです。

要素をマウスオーバーした時に、その要素をプルプル震わせる時の表現として使えます(あんまり使う時ないと思いますが)。

出来上がったものは以下です。

普通にhover とeffect shake を使用するとFirefox でずっとプルプル動いてしまいます。おそらくFirefox のバグです。震えているときにマウスオーバーした要素をラップする要素が生成されるのですが、Firefox がその瞬間をマウスアウトしたと勘違いしているようです。しかし、マウスは実際には最初にマウスオーバーした要素の上にあるので、再度マウスオーバーのイベントが発生する。すると、またラップ要素が生成されて・・・と繰り返されてずっとプルプル震えてしまうみたいです。

コツとしては、マウスオーバーした時にshake アニメーションをしているかどうかを判別するためのクラス animated を追加してあげれば解決できます。マウスオーバーした要素に対して hasClass(‘animated’) で判定してあげて、false であれば animated を追加してshake エフェクトを再生、true であれば何も処理しないという分岐です。

この hasClass(‘animated’) は今回に限らず、そのほかにも応用が利くので便利に使えますね。

Comments are closed.