如何使用jquery延迟隐藏事件

Question

我在悬停触发的下拉菜单上有一个显示/隐藏功能，我现在正试图调整它。我希望下拉列表在悬停时出现，但当鼠标离开时，等待大约500毫秒后再返回，除非鼠标离开并悬停在另一个li项目上（我甚至还没有解决第二个条件，因为我没有成功满足第一个条件）。

这是我迄今为止所拥有的一部分。。。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);
});

从这一变化完全打破了这一事件的事实来看，我知道我做得不太对。然而，我似乎不知道什么是正确的方法。任何帮助都将不胜感激。

Answer 1

使用delay(duration)

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

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

Answer 2

我相信您可能需要在这里使用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/