欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年08月20日 15:15:53   投稿：lijiao  
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)事件的延時(shí)處理效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

jQuery鼠標(biāo)經(jīng)過(guò)(hover)事件的延時(shí)處理，具體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方法共四個(gè)參數(shù)，表示意思如下：

  • hoverDuring        鼠標(biāo)經(jīng)過(guò)的延時(shí)時(shí)間
  • outDuring            鼠標(biāo)移出的延時(shí)時(shí)間
  • hoverEvent          鼠標(biāo)經(jīng)過(guò)執(zhí)行的方法
  • outEvent              鼠標(biāo)移出執(zhí)行的方法

該函數(shù)的目的在于讓鼠標(biāo)經(jīng)過(guò)事件和延時(shí)分離的出來(lái)，延時(shí)以及延遲的清除都已經(jīng)由此方法解決了。您所要做的，就是設(shè)定延時(shí)的時(shí)間大小，以及相應(yīng)的鼠標(biāo)經(jīng)過(guò)或是移除事件即可。舉個(gè)簡(jiǎn)單的例子吧，如下代碼：

$("#test").hoverDelay({ 
 hoverDuring: 1000, 
 outDuring: 1000, 
 hoverEvent: function(){ 
  $("#tm").show(); 
 }, 
 outEvent: function(){ 
  $("#tm").hide(); 
 } 
});

以下為更簡(jiǎn)潔的一個(gè)案例：

$("#test").hoverDelay({ 
 hoverEvent: function(){ 
  alert("經(jīng)過(guò) 我！"); 
 } 
});

表示的含義是id為test的元素在鼠標(biāo)經(jīng)過(guò)后200毫秒后彈出含有“經(jīng)過(guò) 我！”文字字樣的彈出框。

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

相關(guān)文章

最新評(píng)論