8

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

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

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

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

这是我的情况的FIDDLE/DEMO。

任何帮助将不胜感激。

谢谢。

4

3 回答 3

10

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

于 2011-06-06T17:42:22.803 回答
3

你需要隐藏一段时间：

$('.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监听器

于 2011-06-06T17:38:05.597 回答
3

使用setTimeout而不是delay.

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

来自jQuery 延迟文档：

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。

于 2011-06-06T17:45:24.867 回答