快捷導(dǎo)航

jQuery實現(xiàn)鼠標(biāo)經(jīng)過事件的延時處理效果

更新時間：2020年08月20日 15:15:53 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)鼠標(biāo)經(jīng)過事件的延時處理效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

jQuery鼠標(biāo)經(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 鼠標(biāo)經(jīng)過的延時時間
outDuring 鼠標(biāo)移出的延時時間
hoverEvent 鼠標(biāo)經(jīng)過執(zhí)行的方法
outEvent 鼠標(biāo)移出執(zhí)行的方法

該函數(shù)的目的在于讓鼠標(biāo)經(jīng)過事件和延時分離的出來，延時以及延遲的清除都已經(jīng)由此方法解決了。您所要做的，就是設(shè)定延時的時間大小，以及相應(yīng)的鼠標(biāo)經(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的元素在鼠標(biāo)經(jīng)過后200毫秒后彈出含有“經(jīng)過我！”文字字樣的彈出框。

以上就是關(guān)于jQuery鼠標(biāo)經(jīng)過(hover)事件的延時處理全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

原生jQuery實現(xiàn)只顯示年份下拉框
這篇文章主要介紹了原生jQuery實現(xiàn)只顯示年份下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
Jquery：ajax實現(xiàn)翻頁無刷新功能代碼
ajax實現(xiàn)翻頁在實際應(yīng)用中還是比較常見的，實現(xiàn)ajax翻頁有兩部分：js部分、html部分，具體如下，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
關(guān)于webuploader插件使用過程遇到的小問題
這篇文章主要為大家詳細(xì)解決了關(guān)于webuploader插件使用過程遇到的小問題,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
jquery實現(xiàn)通用的內(nèi)容漸顯Tab選項卡效果
這篇文章主要介紹了jquery實現(xiàn)通用的內(nèi)容漸顯Tab選項卡效果,涉及jquery通過時間函數(shù)定時觸發(fā)頁面元素樣式變換的功能,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
jQuery插件HighCharts實現(xiàn)的2D對數(shù)餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D對數(shù)餅圖效果,結(jié)合實例形式分析了jQuery圖形插件HighCharts繪制2D對數(shù)餅圖的具體實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
基于$.ajax()方法從服務(wù)器獲取json數(shù)據(jù)的幾種方式總結(jié)
下面小編就為大家分享一篇基于$.ajax()方法從服務(wù)器獲取json數(shù)據(jù)的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
為jquery.ui.dialog 增加“在當(dāng)前鼠標(biāo)位置打開”的功能
在使用jquery.ui.dialog的過程中，發(fā)現(xiàn)position參數(shù)有些問題，無法通過position: [PosX, PosY]動態(tài)傳遞位置參數(shù)。下面是官方demo 代碼
2009-11-11
15款jQuery分布引導(dǎo)插件分享
這篇文章主要給大家分享了15款jQuery分布引導(dǎo)插件,需要的朋友可以參考下
2015-02-02
40款非常棒的jQuery 插件和制作教程（系列二）
jQuery 在現(xiàn)在的 Web 開發(fā)項目中扮演著重要角色，jQuery 讓網(wǎng)站有更好的可用性和用戶體驗，讓訪問者對網(wǎng)站留下非常好的印象
2011-11-11
jQuery is not defined 錯誤原因與解決方法小結(jié)
今天在測試一個程序的時候，明顯已經(jīng)加載了jquery但總是提示jQuery is not defined，經(jīng)過多方測試終于發(fā)現(xiàn)了問題，這里簡單總結(jié)一下,需要的朋友可以參考下
2017-03-03