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

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

 更新時間：2020年08月20日 15:15:53   投稿：lijiao  
這篇文章主要為大家詳細介紹了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)容，希望對大家的學習有所幫助。

相關文章

最新評論