3

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

一切运行良好，但我对导航不是 100% 满意。滑动位置指示器工作顺利，但我想集成悬停意图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);
        });

});

如您所见，我需要将鼠标悬停和鼠标悬停绑定到单独的元素（列表项和包含 div）。

谢谢！

4

1 回答 1

5

如果您只想避免用户通过将鼠标悬停在导航上触发滑动，我会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);

这只是一个开始——我敢打赌，你可以更概括它。

于 2011-04-28T04:30:32.403 回答