实施悬停意向

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); 

而这仅仅是一个开始 - 你可以概括它甚至更多，我敢打赌。