【Raphael.js】Raphaelエレメントにマウスホバーのイベントを追加する方法

hover関数

hover関数を使用すると、マウスがエレメント内部に侵入した場合と出て行った時の両方のイベントを追加できます。使用頻度は何気に高そうです。

実行結果

FullScreen http://jsfiddle.net/nekosmash/gerWz/embedded/result/

解説

エレメント内にマウスが入ればポヨヨンと縮小するアニメーション。出ていけばポヨヨンと元に戻るアニメーションをさせています。基本的に第2引数までの指定でもOKですが、第3、第4引数でエレメントを渡して処理させる事も出来ます。

Element.hover(hover_in_handler, hover_out_handler, in_item, out_item);

• Element: ホバーイベントを追加するエレメント
• hover_in_handler: ホバー時に処理させる関数
• hover_in_handler: ホバー終了時に処理させる関数
• (省略可能)in_item: hover_in_handlerにエレメントを渡すことができる。
• (省略可能)out_item: hover_out_handlerにエレメントを渡すことができる。
• 返り値: ホバーイベントを追加したRaphaelエレメント