javascript - 如何延迟jquery悬停事件

Question

我有一个带有类别的菜单，当我将鼠标悬停在某个类别上时，会出现一个下拉菜单(我已经延迟下拉到 600 毫秒后显示)，

我想知道如何将类别上的悬停事件也延迟 600 毫秒，使用 jquery 实现此目的的最佳方式和最简单方式是什么？

jQuery('div.dropdown').hover(function() {
    jQuery(this).find('.services-shortcut').addClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
    jQuery(this).find('.services-shortcut').removeClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
});

我在这里做了一个bootply http://www.bootply.com/lXioubaMre

Answer 1

您可以使用基本的 CSS 过渡

.services-shortcut {
    transition: all 0s .6s;
}

在 600ms 之后立即运行延迟

示例:http://www.bootply.com/xppQzbvQ3P

如果您选择完全在 javascript 中执行此效果(但我不会这样做，只是为了避免 javascript 的样式)，然后应用 active在 600ms 之后上课超时，例如

jQuery('div.dropdown').hover(function() {
    var $this = $(this);
    setTimeout(function() {
        $this.find('.services-shortcut').addClass('active');
    }, 600);
    $this.find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, ...

如果您使用这种方法，那么您还应该清除间隔 onmouseout