jQuery 滑鼠經過(hover)事件的延時處理範例_jquery

一、關於滑鼠hover事件及延時
滑鼠經過事件為web頁面上非常常見的事件之一。簡單的hover可以用CSS :hover偽類別實現，複雜點的用js。

一般情況下，我們是不對滑鼠hover事件進行延遲處理。但是，有時候，為了避免不必要的干擾，常常會對滑鼠hover事件進行延時處理。所謂幹擾，就是當使用者滑鼠不經意地劃過摸個鏈接，選項卡，或是其他區域時，本沒有顯示隱藏層，或是選項卡切換，但是由於這些元素上綁定了hover事件（或是mouseover事件），且無延時，這些時間就會立即觸發，反而會對使用者進行幹擾。

例如，在騰訊網首頁，幾乎對所有的滑鼠經過事件進行了延時處理，例如其選項卡：

 

或是其頂部的搜搜導航條，見下圖：

 

二、實例及示範
本文的主要內容就是展示我前幾天寫的滑鼠延遲的方法， jQuery下的方法，水平拙劣，僅供參考。本文就以騰訊網首頁搜搜搜尋欄的一些滑鼠經過效果為實例，示範jQuery下的縮時處理。下圖為demo頁面的效果截圖：

 

三、程式碼與實作
說到延遲，離不開window下的setTimeout方法，本實例的jQuery方法的核心也是setTimeout。程式碼不長，完整如下：

複製程式碼 程式碼如下:

$.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(Dusets.out,Timed );
});
});
}
})(jQuery);

這段程式碼的目的在於讓老鼠經過事件和延時分離的出來，延時以及延遲的清除都已經由此方法解決了。您要做的，就是設定延時的時間大小，以及對應的滑鼠經過或是移除事件即可。舉個簡單的例子吧，如下碼：

複製程式碼 程式碼如下:

程式碼如下:


>$("#test").hoverDelay({
hoverEvent: function(){
alert("經過我！");

}
});


表示的意思是id為test的元素在滑鼠經過後200毫秒後彈出含有「經過我！」文字字樣的彈出框。

ok，現在應用在本文的實例。

騰訊網的首頁的搜尋框上面除了滑鼠經過延時，其換膚也是值得一提的，關於換膚我之前也提過，在jQuery-馬化騰產品設計與用戶體驗的一些技術實現一文中，對應的demo頁面您可以狠狠地點擊這裡：騰訊首頁個性化換膚demo頁面

首先，展示下騰訊首頁搜尋欄的主要HTML結構域代碼： 複製程式碼

程式碼如下:

網頁

圖

;

影片

音樂

搜尋吧

;

提問

部落格

更多▼

;

• 綜合


• 新聞


• 搜尋


• 生活


• 百科


• 所有產品

與先首頁代碼幾乎一致，例如換假包。應用了本文無技術儲備的延遲方法後，可以應用如下的程式碼實現延遲執行。

複製程式碼程式碼如下：

$(".s2"). (function(){
$ ("#sosoFod h3").each(function(){
var that = $(this);
var id = that.attr("id");
if(id){
that.hoverDelay({
hoverEvent: function(){
$(".s1").attr("class","s2");
that .attr("class","s1" "); //感謝「type23」提供了綁定物件方法
$(this).attr("class","s1");
}
});
}else{
that.hoverDelay({
outDuring: 1000,
hoverEvent: function(){
$("#tm").show();
},
outEvent: 函數(){
$("#tm").hide()
}
});


唉，慚愧，程式碼就這樣，沒什麼技術含量的，希望對有用的有用吧。 🎜>
hoverDelay方法共四個參數，表示意思如下：

hoverDuring       滑鼠移出的延遲時間
outDuring          滑鼠移出的延遲時間
hover  🎜>