JQuery のマウスオーバー (ホバー) イベント遅延処理、具体的な JS コードは次のとおりです:
(function($){ $.fn.hoverDelay = function(options){ var defaults = { hoverDuring: 200, outDuring: 200, hoverEvent: function(){ $.noop(); }, outEvent: function(){ $.noop(); } }; var sets = $.extend(defaults,options || {}); var hoverTimer, outTimer; return $(this).each(function(){ $(this).hover(function(){ clearTimeout(outTimer); hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring); },function(){ clearTimeout(hoverTimer); outTimer = setTimeout(sets.outEvent, sets.outDuring); }); }); } })(jQuery);
hoverDelay メソッドには 4 つのパラメーターがあり、次のことを意味します:
hoverDuring マウス通過の遅延時間
outDuring マウスアウト遅延時間
hoverEvent マウス通過後に実行されるメソッド
outEvent マウスを外に出したときに実行されるメソッド
この機能の目的は、マウス通過イベントと遅延を分離することであり、この方法により遅延と遅延が解決されます。必要なのは、遅延時間と、対応するマウスの通過または削除イベントを設定することだけです。次のような の簡単な例を見てみましょう:
$("#test").hoverDelay({ hoverDuring: 1000, outDuring: 1000, hoverEvent: function(){ $("#tm").show(); }, outEvent: function(){ $("#tm").hide(); } });
以下は、より簡潔な ケース です:
$("#test").hoverDelay({ hoverEvent: function(){ alert("经过 我!"); } });
は、ID test を持つ要素が、マウスがその上を通過してから 200 ミリ秒後に「Pass me!」というテキストを含むポップアップ ボックスをポップアップ表示することを意味します。
上記は jQuery のマウスオーバー (ホバー) イベントの遅延処理に関するもので、皆さんの学習に役立つことを願っています。