如何使用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延迟隐藏事件

回答

相关问题