.mouseleave()与.delay()一起工作 [英] .mouseleave() with .delay() working together

问题描述

我有几个触发器"(<li>s)的列表，每个触发器显示一个特定的DIV，每个DIV都有关闭"按钮.

现在，我想通过在打开的/可见的DIV中添加计时器/延迟来提高可用性，以便在用户将鼠标从触发器移开后3或5秒后，打开的/可见的DIV会淡出. /p>

我现在遇到的问题是，每当我使用.mouseleave()添加一个函数时，一旦鼠标离开触发区域，打开/可见的DIV就会隐藏.

但是，如果删除该功能，则DIV将保持可见状态，并且可以通过单击关闭按钮将其关闭.

这是我的情况 FIDDLE/DEMO .

/p>

任何帮助将不胜感激.

谢谢.

解决方案

@locrizak的答案正确(+1).这是因为.delay()默认为效果队列，但是.hide()没有参数会隐藏所选元素而没有任何效果，因此效果队列完全没有涉及.

如果要隐藏而不显示任何动画，只需使用 setTimeout :

$('.trigger').mouseleave(function() {
    setTimeout(function () {
        $('.copy .wrapper').hide();
    }, 3000);
});

http://jsfiddle.net/mattball/93F3k/

---

最后一次编辑，我保证

//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();
});

演示: http://jsfiddle.net/mattball/b2ew5/

I have a list of several 'triggers' (<li>s), each trigger shows a specific DIV, and each DIV has 'close' button.

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.

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.

However, if you remove the function, then the DIV stays visible and you're able to close it by clicking the close button.

Here's a FIDDLE/DEMO of my situation.

Any help would be greatly appreciated.

Thanks.

解决方案

@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.

If you want to hide without any animation, just use setTimeout:

$('.trigger').mouseleave(function() {
    setTimeout(function () {
        $('.copy .wrapper').hide();
    }, 3000);
});

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();
});

Demo: http://jsfiddle.net/mattball/b2ew5/

这篇关于.mouseleave()与.delay()一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！