jquery - 5 秒后或用户单击关闭链接时隐藏 DIV

Question

作为引用，请参阅 jsFiddle 链接 here .这是一个显示 stackoverflow 样式弹出消息的简短脚本。我想要做的是让用户选择是让消息在 5 秒后自行消失，还是通过单击消息对话框右侧的“X”关闭消息。

我尝试添加延迟:

$("#message").fadeIn('slow').delay(5000).queue(function() {
    $('#message').fadeOut('slow');
});

这会起作用，但不会触发用于关闭消息对话框的“X”链接上的 onClick 事件。

如有任何帮助，我们将不胜感激。

Answer 1

试试这个:

$("#message").fadeIn('slow').delay(5000).fadeOut('slow');

$('#message a.close-notify').click(function () {
    $('#message').stop().fadeOut('slow', removeMessageLayer);
    $('#messageContainer').text();
    return false;
});

演示:http://jsfiddle.net/xSRk8/15/

添加自动淡入淡出时单击 X 关闭停止工作的原因是 jQuery 排队动画方法，因此在您尝试 fadeOut() 淡入淡出的元素的单击处理程序中out 在延迟之后 被添加到队列中。如果您调用 .stop()它会取消任何现有的排队效果，因此您可以立即执行 fadeOut()。

此外，您的 removeMessageLayer() 函数实际上根本没有删除消息元素 - 您只是认为它消失了，因为它已经淡出。你的代码

$('body').remove('#message');

...表示如果 body 元素与传递给 remove() 的选择器匹配，则删除它，当然它永远不会。你需要$('#message').remove();，你不需要先测试message元素是否存在，因为jQuery本质上忽略了.remove() 如果在一个空的 jQuery 对象上调用。所以使用这个:

function removeMessageLayer() {
    $('#message').remove();
}