如何在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事件

回答

相關問題