jQuery .mouseleave() 和 .delay() 一起工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6255821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
.mouseleave() with .delay() working together
提问by Ricardo Zea
I have a list of several 'triggers' (<li>s), each trigger shows a specific DIV, and each DIV has 'close' button.
我有一个包含多个“触发器” ( <li>s)的列表，每个触发器显示一个特定的 DIV，每个 DIV 都有一个“关闭”按钮。
Now, I want to improve the usability by adding a timer/delay to the opened/visible DIV so that after3 or 5 seconds after the user has moved his mouse away from the trigger, the opened/visible DIV fades out.
现在，我想通过向打开的/可见的 DIV 添加计时器/延迟来提高可用性，以便在用户将鼠标移离触发器 3 或 5 秒后，打开的/可见的 DIV 淡出。
The problem I'm having right now, is that whenever I add a function with .mouseleave(), the opened/visible DIV hides as soon as the mouse leaves the trigger area.
我现在遇到的问题是，每当我使用 .mouseleave() 添加函数时，一旦鼠标离开触发区域，打开的/可见的 DIV 就会隐藏。
However, if you remove the function, then the DIV stays visible and you're able to close it by clicking the close button.
但是，如果您删除该函数，则 DIV 将保持可见，您可以通过单击关闭按钮将其关闭。
Here's a FIDDLE/DEMOof my situation.
这是我的情况的小提琴/演示。
Any help would be greatly appreciated.
任何帮助将不胜感激。
Thanks.
谢谢。
回答by Matt Ball
@locrizak's answer is right (+1). This is because .delay()defaults to the effects queue, but .hide()with no parameters hides the selected elements without any effect, so the effects queue isn't involved at all.
@locrizak 的答案是正确的（+1）。这是因为.delay()默认为效果队列，但.hide()没有参数隐藏所选元素没有任何效果，因此根本不涉及效果队列。
If you want to hide without any animation, just use setTimeout:
如果你想在没有任何动画的情况下隐藏，只需使用setTimeout：
$('.trigger').mouseleave(function() {
setTimeout(function () {
$('.copy .wrapper').hide();
}, 3000);
});
http://jsfiddle.net/mattball/93F3k/
http://jsfiddle.net/mattball/93F3k/
Last edit, I promise
最后编辑，我保证
//Show-Hide divs
var current;
$('.trigger').live('mouseenter', function() {
var id = current = $(this).data('code');
$('#' + id).show().siblings().fadeOut();
}).live('mouseleave', function() {
var id = $(this).data('code');
current = null;
setTimeout(function ()
{
if (current !== id) $('#' + id).hide(1);
}, 3000);
});
//Close button
$('.copy .wrapper span').live('click', function() {
$(this).closest('.wrapper').stop(true, true).fadeOut();
});
回答by locrizak
you need a duration in the hide:
你需要隐藏的持续时间：
$('.copy .wrapper').delay(3000).hide('fast');You can take a look at the docs http://api.jquery.com/delay/
您可以查看文档http://api.jquery.com/delay/
update
更新
is this what your looking for?
这是你要找的吗？
$('.trigger').bind("mouseenter" , function() {
var id = $(this).attr("data-code"); // Get the data from the hovered element
$('.copy .wrapper:visible').fadeOut();
$('#' + id).stop(true, true).show(); // Toggle the correct div
//Close button
$('.copy .wrapper span').click(function() {
$('.copy .wrapper').fadeOut();
});
});Thats it get rid of mouseleave listener
这就是它摆脱了 mouseleave 侦听器
回答by marcosfromero
Use setTimeoutinstead of delay.
使用setTimeout代替delay。
Working demo: http://jsfiddle.net/J7qTy/
工作演示：http: //jsfiddle.net/J7qTy/
From jQuery delaydocumentation:
来自jQuery 延迟文档：
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
.delay() 方法最适合在排队的 jQuery 效果之间延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，后者可能更适合某些用例。
