Plugins | jQuery Plugins

ホバー開始、終了時のアクションタイマーを実装できるjQueryプラグイン「hoverTimer」。
cssの:hoverなどを使うと、マウスホバー時の動作を指定できたりしますが、hoverTimerを使えば、ホバー開始や終了から何秒後という風にタイミングをずらせて処理を行うことが容易です。

ヘルプやヒントなんかで、マウスを乗せたらしばらくはマウス操作に関わらず数秒表示しておくというような部分に応用できますね。

実装は次のようにhoverTimerメソッドにオプションを渡せば動きます。

$(element).hoverTimer({
  waitover:200, // overイベント開始からの待ち (ミリ秒)
  waitout:800, // outイベント開始からの待ち (ミリ秒)
  over: function(ev) { /* ホバー開始時の処理 */ },
  out: function(ev) { /* ホバー終了時の処理 */ }
});



デモページはこちら

使い方次第で、気の利いたサイトに仕上げることができそうですね。

関連エントリ

• Amazonスタイルのアイテムスクローラー実装jQueryプラグイン
• 色合いを選べるツールチップ実装jQueryプラグイン「Colortip」
• IEでも使える画像の回転用jQueryプラグイン「jQueryRotate」