Question

我有几个'触发器'列表（<li>s），每个触发器显示一个特定的DIV，每个DIV都有'关闭'按钮。

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

我现在遇到的问题是，每当我使用.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/

Answer 2

你需要在隐藏中持续一段时间：

$('.copy .wrapper').delay(3000).hide('fast');

您可以查看文档http://api.jquery.com/delay/

更新

这就是你要找的东西吗？

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

这就是摆脱了mouseleave监听器

Answer 3

使用setTimeout代替delay。

工作演示： http://jsfiddle.net/J7qTy/

来自jQuery delay文档：

.delay（）方法最适合在排队的jQuery之间延迟效果。因为它是有限的 - 它例如，没有提供一种方法取消延迟-.delay（）不是替换JavaScript的原生 setTimeout函数，可能更多适用于某些用例。

.mouseleave（）与.delay（）一起工作

3 个答案:

最后编辑，我保证

更新