如何使用jquery延遲隱藏事件

我有一個顯示/隱藏功能，我試圖調整現在的懸停觸發下拉菜單。我希望鼠標懸停時出現下拉菜單，但當鼠標離開之前等待大約500毫秒，除非鼠標已經離開並懸停在另一個li項目上（我甚至沒有解決這個問題條件還沒有，因爲我沒有遇到第一次）。如何使用jquery延遲隱藏事件

這裏是什麼，我至今一的jsfiddle ... http://jsfiddle.net/u4e1tv21/12/

我已經做了一些挖掘，我試圖改變JS的該位

$('[data-toggle="menu"]').on('mouseleave', function (ev) { 
    var id = $(this).data('target'); 
    $('.sub-menu').hide(); 
    $(id).hide(); 
});

這個

$('[data-toggle="menu"]').on('mouseleave', function (ev) { 
    var id = $(this).data('target'); 
    setTimeout(function() { 
     $('.sub-menu').hide(); 
     $(id).hide(); 
    }; 2000); 
});

通過事實證明這一變化完全打破了這個事件，我知道我沒有把事情說得很對。但是，我似乎無法弄清楚什麼是正確的做法。任何幫助將非常感激。

來源

2014-10-06 Maddi

爲什麼不使用'delay（2000）'？ – 2014-10-06 16:27:16

您有語法錯誤。在'2000'前的';'應該是'，'。 http://jsfiddle.net/barmar/u4e1tv21/16/ – Barmar 2014-10-06 16:28:40

你沒有從Javascript控制檯中得到一個錯誤？ – Barmar 2014-10-06 16:29:29

使用delay(duration)

$('.sub-menu').delay(500).hide(0); 
$(id).delay(500).hide(0);

更多信息：http://api.jquery.com/delay/

來源

2014-10-06 16:20:40 Arbel

我試了一下，但它似乎沒有影響任何東西... http://jsfiddle.net/u4e1tv21/14/ 我加錯了嗎？ – Maddi 2014-10-06 16:25:54

@Maddi'delay（）'適用於jQuery動畫，爲了讓這個工作，你需要給'hide（）'a duration => http://jsfiddle.net/u4e1tv21/17/ – 2014-10-06 16:36:27

@AminJafari 0作爲好，並使其瞬間。 – Arbel 2014-10-06 16:38:23

我相信你可能需要的是在這裏使用的是slideUp()和slideDown()效果

$(document).ready(function() { 
    $('.sub-menu').hide(); 

    $('[data-toggle="menu"]').on('mouseenter', function (ev) { 
     var id = $(this).data('target'); 
     $('.sub-menu').slideUp(); 
     $(id).slideDown(); 
    }); 
    $('[data-toggle="menu"]').on('mouseleave', function (ev) { 
     var id = $(this).data('target'); 
     $('.sub-menu').slideUp(); 
     $(id).slideUp(); 
    }); 
});

這種效果，你將有一個不錯的和整潔的子菜單動畫，無需使用兩個效果功能，如delay().hide()這也將工作但slideUp和slideDown（）會使我認爲它更短。

這裏更新了小提琴http://jsfiddle.net/u4e1tv21/20/

來源

2014-10-06 16:50:48 SULTAN

隨着元素之間的快速切換，它看起來不會很好。此外，如果觸發'mouseenter'和'mouseleave'事件的速度比動畫更快，則在您停止懸停元素後，會以幾次滑動結束。我建議在每個幻燈片動畫之前添加'.stop（）'來解決這些問題。 – Regent 2014-10-06 17:08:56

如何使用jquery延遲隱藏事件

回答

相關問題