悬停按钮 X 时间时仅显示 Div - 无法使其正常工作

Question

所以我正在制作一个菜单，当您将鼠标悬停在菜单按钮上时会显示各种 div，但问题是当您将鼠标悬停在按钮上时事件会立即触发，而我不会想要，因为如果您将鼠标滑过多个按钮，那么它们都会同时触发并显示/隐藏 div 容器（看起来很糟糕）。

我希望仅当用户将按钮悬停一定时间（例如 500 毫秒）时才触发事件，因为那样他们一次只会看到一个 div 容器。

这是我正在使用的代码，例如对于菜单按钮：

$(".menu-button").hover(function(e) {
    e.preventDefault(); //To prevent default anchor tag behaviour
    e.stopPropagation(); //To prevent parent container click event from firing

    $(".menu-container").delay(300).slideDown(800);

});


var myTimer = false;

$(".menu-button, .menu-container").hover(function(){

    //mouse enter
    clearTimeout(myTimer);
},function(){
    //mouse leav
  myTimer = setTimeout(function(){
         $(".menu-container").slideUp(500);
    },100)
});

Fiddle: http://jsfiddle.net/1g0Lraec/5/

快把我逼疯了，希望有人能帮帮我！

谢谢 :-)

Answer 1

你可以使用这个：

var upTimer = false ,
downTimer = false ,
isHover = false ;

$(".menu-button, .menu-container").hover(function(){
    isHover = true;
    clearTimeout(upTimer);

    downTimer = setTimeout(function(){
        if(isHover)
        $(".menu-container").slideDown(500);
    },500);

},function(){

    isHover = false;
    clearTimeout(downTimer);


    upTimer = setTimeout(function(){
         $(".menu-container").slideUp(500);
    },100);

});

JSFIDDLE

这也适用：

var downTimer = false

$(".menu-button, .menu-container").hover(function(){

    downTimer = setTimeout(function(){
        $(".menu-container").slideDown(500);
    },500);

},function(){
    clearTimeout(downTimer);
    $(".menu-container").slideUp(500);
});

悬停按钮 X 时间时仅显示 Div - 无法使其正常工作

Only Show Divs When Hovering Button for X Time - Can't make it work properly

javascript

jquery

hover