Question

我刚刚完成了这个Wordpress主题的开发： http://www.minnesdiner.com/

一切运作良好，但我对导航并不是百分之百满意。滑动位置指示器工作顺利，但我想整合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绑定到单独的元素（list-item并包含div）。

谢谢！

Answer 1

如果你想做的就是避免用户通过鼠标悬停导航来触发幻灯片，我只需在你的悬停功能中setTimeout在经过一段时间后调用你的滑动代码，然后清除mouseout事件的超时。不需要额外的插件。

例如：

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

编辑： by，您应该将所有这些悬停功能合并为一个。你可以这样做：

$('.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);

这只是一个开始 - 你可以更多地概括它，我打赌。

实现悬停意图

1 个答案: