实现悬停意图

Question

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

一切都运作良好,但我对导航并不是百分之百满意.滑动位置指示器工作顺利,但我想集成悬停意图 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 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);

这只是一个开始 - 你可以更加概括,我敢打赌.