THE HAM MEDIA BLOG

jQueryの.hover()メソッドを.on()で使うためには?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
bind
ON
Hover

jQueryを使って、ちょっとしたhoverの機能を使いたいときは、.hover()メソッドを使っているのですが、これを.on()(.bind())で使うのはどうやるんだろう?とかわかるようでわからなかったので、ちょっと調べてみた。

.hover()を利用してみる

とりあえず、.hover()の使い方からおさらいしてみたいと思います。

.hover()メソッドは、マウスを乗せた時とはずした時の2つの処理を入れておくことで、実現できます。

$('#demo1 p').hover(function(){
    $(this).fadeTo('fast',.3);
},function(){
    $(this).fadeTo('fast',1);
});

ここにマウスをのせる

マウスを乗せると、少し透明になり、はずすともとに戻るという機能です。

以前は乗せた時とはずした時の2つの処理を入れておかなければエラーだったのですが、現在は一つだけでもあればエラーなしに、乗せた時のみの動作をするようになっています。

それは、以前と現在では、.hover()のエイリアスに変更があったためです。

以前の.hover()は.mouseenter().mouseleave()のエイリアス

以前の.hover()で2つの処理を入れておかなければエラーになっていたのは、.mouseenter()と.mouseleave()の2つのメソッドを含んでいたためです。

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

.hover() - jQuery API

つまり先ほどの.hover()を、.mouseenter()と.mouseleave()に分けて書くと、下記の様になります。

$('#demo2 p').mouseenter(function(){
    $(this).fadeTo('fast',.3);
}).mouseleave(function(){
    $(this).fadeTo('fast',1);
});

ここにマウスをのせる

こっちのほうが、ぱっと見た時の処理はわかりやすいかもしれません。

それと、いまさらな注意ですが、.hover()は.mouseenter()と.mouseleave()のエイリアスであって、.mouseover()と.mouseout()とは動作が違うので要注意です。

.hover()の現在のエイリアス

以前までのエイリアスは、先程確認したとおりですが、現在はmouseenterとmouseleaveのイベントがbindでまとめられたイベントのエイリアスに変更されています。

Calling $(selector).hover(handlerInOut) is shorthand for::

$(selector).bind("mouseenter mouseleave", handlerInOut);

.hover() - jQuery API

jQuery1.4以降のバージョンから、上記の様になったようです。このため、2つの機能がなくても動作するようになったようです。

.hover()を.bind()で書き換えてみる

では、.hover()を.bind()を使って、書き換えてみたいと思います。

jQuery1.4以降は、bindでマルチイベントに対応しているので、その書き方を使います。

$('#demo3 p').bind({
    'mouseenter':function(){
        $(this).fadeTo('fast',.3);
    },
    'mouseleave':function(){
        $(this).fadeTo('fast',1);
    }
});

ここにマウスをのせる

ちなみに、ここまでにエイリアスの話を挟んできたので、不要かと思ったのですが念のために・・・.bind()ではhoverというイベントは使えません(現在は無いのです)。

toggle系のイベントならまとめて書ける

$('◯◯').bind('mouseenter mouseleave',function(){
    $(this).toggleClass('active');
});

上記の様に書けるようなので、じゃあ、.toggle()でイベント作って中に入れたらいいじゃーんって思ってやってみたのですが、残念ながら動作せず。

■下記は動作しません

$('◯◯').bind('mouseenter mouseleave',function(){
    $(this).toggle(function(){
        //省略
    },function(){
        //省略
    });
});

動くように思ったのですが、動かず。

ちなみに、表示非表示の切り替えのtoggleは動作します。

$('◯◯').bind('mouseenter mouseleave',function(){
    $(this).toggle('fast');
});

.bind()を.on()に置き換える

jQuery 1.7 より、.bind()、.live()、.delegate()が.on()に統合されています。今回の.bind()も.on()にできるので、そのまま置き換えてみます。

$('#demo4 p').on({
    'mouseenter':function(){
        $(this).fadeTo('fast',.3);
    },
    'mouseleave':function(){
    $(this).fadeTo('fast',1);
    }
});

ここにマウスをのせる

これで目的の.hover()を.on()で使えるようにしてみました。

hoverはmouseenterとmouseleaveのエイリアスというのは知っていたのですが、bindでhoverの機能を付けたい時にちょっと疑問になったので、今回のエントリーを書いてみました。

参考サイト:
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/242553044
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。