javascript - 实现悬停意图

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 和 mouseout 绑定(bind)到单独的元素(列表项和包含的 div)。

谢谢!

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

这只是一个开始 - 我敢打赌，您可以进一步概括它。