如何在jQuery中延迟mouseout事件

下面的代码允许我在悬停时显示垂直菜单，但一旦出现鼠标事件，它将立即消失。我不是一个编码员，我所做的只是随处可见的代码玩，但请。如何在jQuery中延迟mouseout事件

if($(columnElement).length 
     && $(window).width() >= maxWindowSize) {   
    showOrHideSliderBarMenu(columnElement, menuElement, 1); 
} 

$(".float-vertical-button").hover(function(){ 
    var numberToUse = $(menuElement).hasClass('active') ? 0 : 1; 
    showOrHideSliderBarMenu(columnElement, menuElement, numberToUse); 
});

来源

2014-12-19 MBabu

您有setTimeout的发挥。 – 2014-12-19 11:51:22

jQuery的.hover()实际上是链接在一起的两个事件。（mouseenter和mouseleave）。你应该单独指定它们。 E.g：

$(".float-vertical-button").hover(

    //Mouse enter handler 
    function() { 
    showOrHideSliderBarMenu(columnElement, menuElement, 1); 
    }, 

    //Mouse leave handler 
    function() { 
    setTimeout(function(){ 
     showOrHideSliderBarMenu(columnElement, menuElement, 0); 
    }, 500); 
    } 
);

http://api.jquery.com/hover/

来源

2014-12-19 12:40:42 ne1410s

这很好。非常感谢。 – MBabu 2014-12-20 09:17:11

我在这里有一个问题;当鼠标从显示的菜单中移出时，菜单仍然停留在那里。我正在尝试实现与亚马逊菜单类似的功能。 – MBabu 2014-12-21 19:13:18

你总是可以将你的逻辑封装在setTimeout（）函数中。

setTimeout(function(){ 
    $c('hide!'); 
    hideUnderConstruction(); 
    }, 500); 
}

来源

2014-12-19 11:54:12 Coder

非常感谢您花时间回答。 – MBabu 2014-12-20 09:17:43

if($(columnElement).length && $(window).width()>=maxWindowSize) 
    showOrHideSliderBarMenu(columnElement, menuElement, 1); 
$(".float-vertical-button").hover(function(){ 
    if($(menuElement).hasClass('active')) setTimeout(showOrHideSliderBarMenu(columnElement, menuElement, 0), 1000); 
    else showOrHideSliderBarMenu(columnElement, menuElement, 1); 
});

其中1000以毫秒为单位，你希望的时间延迟

来源

2014-12-19 11:54:21 ziotob

确保你的答案是正确的概述！ – Mivaweb 2014-12-19 11:55:46

这不起作用，但它不会给出任何错误。 – MBabu 2014-12-19 12:02:02

试试编辑好的版本！ – ziotob 2014-12-19 12:06:54

如何在jQuery中延迟mouseout事件

回答

相关问题