延迟jQuery的鼠标离开或toggleClass

Question

我有一个非常简单的悬停菜单，而我试图找出如何处理时机。

的目标是500延迟mouseleave事件，和/或不快速越过其他菜单项反应。

基本功能：

$('.button').on({ 
    mouseenter: function() { 
    $(this).children('.menu').addClass('open'); 
    }, 
    mouseleave: function() { 
    $(this).children('.menu').removeClass('open'); 
    }, 
}); 

与此的主要问题是该按钮和菜单之间的像素间隙 - 当用户移动朝向菜单鼠标然后触发mouseleave功能。

第二烦恼是快速经过鼠标按钮同级它们也触发其mouseenter函数时。

我也试过，但没有反应......

mouseleave: function() { 

    setTimeout(function() { 
    $(this).children('.menu').removeClass('open'); 
    }, 500);}, 

}); 

和我一直在使用

.delay(500).queue(function(){ 
    $(this).removeClass("open").dequeue(); 

也尝试过，但似乎不稳定给我。

console.log($.ui.version)打印1.11.4

Answer 1

考虑等待500毫秒，然后检查，如果你正在寻找的条件（与徘徊不）仍然是正确的。

如果是这样，那么采取适当的行动。

$('.button').on({ 
 
    mouseenter: function() { 
 
    waitEnterExit(this, true); 
 
    }, 
 
    mouseleave: function() { 
 
    waitEnterExit(this, false); 
 
    }, 
 
}); 
 

 

 
function waitEnterExit(el, inside) { 
 
    var button = $(el); 
 

 
    setTimeout(function() { 
 
    var hovered = button.is(':hover'); 
 

 
    if (hovered && inside) 
 
     button.children('.menu').addClass('open'); 
 
    else if (!hovered && !inside) 
 
     button.children('.menu').removeClass('open'); 
 
    }, 500); 
 
}

p { 
 
    display: none; 
 
} 
 

 
.open { 
 
    display: block; 
 
} 
 

 
.button { 
 
    border: 1px solid red; 
 
    margin-bottom: .5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=button>1 
 
    <p class=menu>inner</p> 
 
</div> 
 
<div class=button>2 
 
    <p class=menu>inner</p> 
 
</div> 
 
<div class=button>3 
 
    <p class=menu>inner</p> 
 
</div> 
 
<div class=button>4 
 
    <p class=menu>inner</p> 
 
</div>

Answer 2

上面的反应是正确的，但我只是想说明（无法评论，因为低信誉的，所以我把它当作一个答案）。

需要注意的是，你所使用的鼠标离开不会努力消除在这种情况下类。

mouseleave: function() { 
    //Won't remove .open 
    setTimeout(function() { 
    $(this).children('.menu').removeClass('open'); 
    }, 500);}, 
}); 

会发生什么情况是，setTimeout函数中的$（this）是Window，而不是您的按钮。如果你想定位你的按钮，你必须通过setTimeout函数。一种做法是通过创建一个变量这个。您可以通过在$ set（setTimeout）函数内部和外部调用console.log来测试它，以查看控制台中打印的内容。

mouseleave: function() { 
    // caller now is the equivalent to this 
    var caller = this; 
    setTimeout(function() { 
    // $(this) equivalent to the .button in this case 
    $(caller).children('.menu').removeClass('open'); 
    }, 500);}, 
});