實施懸停意向

Question

我剛剛完成了開發這個WordPress的主題： http://www.minnesdiner.com/

一切運作良好，但我不是100％滿意的導航。 滑動位置指示器工作正常，但我想集成hover intent jQuery插件，以防止滑動指示器在用戶無意中通過導航時滑動。

關於如何整合此插件的任何想法？我目前正在爲每個導航項目啓動一個單獨的jQuery函數，並將座標傳遞給基於哪個項目被擱置的滑動指標。

這裏是我當前的jQuery代碼：

$(document).ready(function() { 

     var $currentpos = $("#menu-indicator").css("left"); 
     $("#menu-indicator").data('storedpos', $currentpos); 

     $(".current-menu-item").mouseenter(function() { 
     $("#menu-indicator").stop().animate({left: $currentpos}, 150); 
     }); 
     $(".menu-item-26").delay(500).mouseenter(function() { 
     $("#menu-indicator").stop().animate({left: "52px"}, 150); 
     }); 
     $(".menu-item-121").mouseenter(function() { 
     $("#menu-indicator").stop().animate({left: "180px"}, 150); 
     }); 
     $(".menu-item-29").mouseenter(function() { 
     $("#menu-indicator").stop().animate({left: "310px"}, 150); 
     }); 
     $(".menu-item-55").mouseenter(function() { 
     $("#menu-indicator").stop().animate({left: "440px"}, 150); 
     }); 
     $(".menu-item-27").mouseenter(function() { 
     $("#menu-indicator").stop().animate({left: "570px"}, 150); 
     }); 
     $(".menu-item-164").mouseenter(function() { 
     $("#menu-indicator").stop().animate({left: "760px"}, 150); 
     }); 

     $delayamt = 400; 
     $("#header-row2").click(function() { 
     $delayamt = 5000; 
     }); 
     $("#header-row2").mouseleave(function() { 
     $("#menu-indicator").stop().delay($delayamt).animate({left: $currentpos}, 600); 
     }); 

}); 

正如你所看到的，我需要綁定mousover和鼠標移開分離元件（列表項和包含分區）。

謝謝！

Answer 1

如果您要做的只是避免用戶通過滑動導航觸發幻燈片，我只需在您的懸停功能中使用setTimeout即可在經過一段時間後調用滑動代碼，並清除超時mouseout事件。不需要額外的插件。

例如：

var hover_timer; 
$('.menu-item').hover(
    function() { 
     hover_timer = setTimeout(function() { 
      ... 
     }, 500); 
    }, 
    function() { clearTimeout(hover_timer); } 
); 

編輯：靠了靠，你應該是所有那些懸停功能合併成一個。你可以這樣做：

$('.menu-item-26').data('slider-pos', '52px'); 
$('.menu-item-121').data('slider-pos', '180px'); 
... 

然後在代碼中滑動，打電話回來：

$this = $(this); 
$('#menu-indicator').stop().animate({left: $this.data('slider-pos')}, 150); 

而這僅僅是一個開始 - 你可以概括它甚至更多，我敢打賭。