.mouseleave()与.delay()一起工作

Question

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

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

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

但是,如果删除该功能,则DIV保持可见,您可以通过单击关闭按钮将其关闭.

这是我的情况的FIDDLE/DEMO.

任何帮助将不胜感激.

谢谢.

Answer 1

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