jQuery實現(xiàn)鼠標經(jīng)過事件的延時處理效果
jQuery鼠標經(jīng)過(hover)事件的延時處理,具體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方法共四個參數(shù),表示意思如下:
- hoverDuring 鼠標經(jīng)過的延時時間
- outDuring 鼠標移出的延時時間
- hoverEvent 鼠標經(jīng)過執(zhí)行的方法
- outEvent 鼠標移出執(zhí)行的方法
該函數(shù)的目的在于讓鼠標經(jīng)過事件和延時分離的出來,延時以及延遲的清除都已經(jīng)由此方法解決了。您所要做的,就是設定延時的時間大小,以及相應的鼠標經(jīng)過或是移除事件即可。舉個簡單的例子吧,如下代碼:
$("#test").hoverDelay({ hoverDuring: 1000, outDuring: 1000, hoverEvent: function(){ $("#tm").show(); }, outEvent: function(){ $("#tm").hide(); } });
以下為更簡潔的一個案例:
$("#test").hoverDelay({ hoverEvent: function(){ alert("經(jīng)過 我!"); } });
表示的含義是id為test的元素在鼠標經(jīng)過后200毫秒后彈出含有“經(jīng)過 我!”文字字樣的彈出框。
以上就是關于jQuery鼠標經(jīng)過(hover)事件的延時處理全部內(nèi)容,希望對大家的學習有所幫助。
- 網(wǎng)頁圖片延時加載的js代碼
- JavaScript延時效果比較不錯的
- js實現(xiàn)網(wǎng)頁圖片延時加載 提升網(wǎng)頁打開速度
- JS圖片根據(jù)鼠標滾動延時加載的實例代碼
- JS延時提示框?qū)崿F(xiàn)方法詳解
- 原生javaScript實現(xiàn)圖片延時加載的方法
- javascript實現(xiàn)延時顯示提示框特效代碼
- jQuery 鼠標經(jīng)過(hover)事件的延時處理示例
- jQuery hover 延時器實現(xiàn)代碼
- Jquery實現(xiàn)圖片預加載與延時加載的方法
- jQuery實現(xiàn)帶延時功能的水平多級菜單效果【附demo源碼下載】
- JS/jQuery實現(xiàn)DIV延時幾秒后消失或顯示的方法
相關文章
用Jquery重寫windows.alert方法實現(xiàn)思路
本文將介紹下用Jquery重寫windows.alert方法,已經(jīng)在 IE8 , firefox3.0.11下面測試通過,喜歡的朋友可以放心使用2013-04-04利用Jquery實現(xiàn)幾款漂亮實用的時間軸(附示例代碼)
這篇文章主要介紹了利用Jquery實現(xiàn)幾款漂亮的時間軸示例代碼,文中利用Jquery實現(xiàn)了縱向折疊時間軸、縱向鼠標滑動時間軸、縱向可折疊時間軸以及橫向時間軸,每種時間軸都給出了完整的示例代碼,需要的朋友可以參考學習。2017-02-02jQuery源碼解讀之extend()與工具方法、實例方法詳解
這篇文章主要介紹了jQuery源碼解讀之extend()與工具方法、實例方法,分析了jQuery中extend()源碼、功能與相關使用技巧,需要的朋友可以參考下2017-03-03