マウスオーバー時の動き【Jquery】

2016-05-26 17:25

理屈とか抜きで、結果だけを。

まずは氷翠がやりたいこと。

jquery2016052601このように緑色のDIV要素があります。
その中にH1タグ等で囲んである文字列があります。
今回やりたいことは、下地の横幅をJquerｙのanimate機能で引き延ばす。もしくは元に戻すというもの。
単純なことなんだけど、ここでひっかかってしまった。

マウスオーバー時に横幅が大きくなし、マウスアウト時に横幅は元の大きさになる。

それだけを考えれば単純な答えだ。

最初はスタイルシートによるアニメーションの方が効率がいいかな？と思ったのだが、さすがに元の大きさを取得したりするのであれば、javascriptで制御するしかないかと。

$(下地の要素).mouseover(function(e) {
    var w = $(this).width() + 50;
    $(this).animate({width:w}, "fast");
}
$(下地の要素).mouseout(function(e) {
    var w = $(this).width() - 50;
    $(this).animate({width:w}, "fast");
}

という感じで作ってみた。
まぁ、動いてくれるのだが、ここで問題が出てきた。
上記の図でいくと、「ダミー文字」の部分にマウスを移動すると…
下地から離れたと認識されたのか、元のサイズに戻ったのだ。

jquery2016052602上の図を立体的に考えるとこんな感じ。
上記のスクリプトでいくと、あくまでも「下地」に対しての処理。
それが、「ダミー文字」の上にマウスを持っていくと、「下地」から「文字」の上にマウスが移動したということになり、「マウスアウト」の状態になるわけだ。

そこで、これを解消する方法を探してみた。

いろいろと掲載されていたのだが、今回のこのことに関しては記事が見つからなかった。
どれも基本的なことばかりで、同じことが書かれている。
ではどういう方法をとればいいのだろうか？と考えているところに、まだ氷翠がやったことのないメソッドの使い方があった。

$(下地の要素).hover(function(e) {
    // マウスオーバー時の処理
},
function(e) {
    // マウスアウト時の処理
});

こんなやりかた。
hoverはスタイルシートのセレクタの一つ。「a:hover」とかって使うやつだ。
それが、上記のやり方でやると、マウスオーバー時とマウスアウト時の処理が一度に可能になるということ。
しかも、hoverであれば、あくまでも「下地」の上にマウスがあるかどうかの考え。

早速やってみると、ほどよく動いてくれた。