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

如需参考，请参阅JSFIDLE链接。下面是一个显示stackoverflow样式弹出消息的短脚本。我想做的是给用户一个选项，让消息在5秒钟后自行消失，或者单击消息对话框右侧的“X”来关闭消息

我试图添加一个延迟：

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

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

任何帮助都将不胜感激

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

因为它是一个动态创建的元素，所以最佳实践认为应该委派单击事件

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

---

基于消息的成功创建，这将给您五秒钟的延迟。

可能不是最干净的，但是您可以在

displayMessage

函数的末尾添加一个

setTimeout

调用

    timeout = setTimeout(function() {
        $('#message').fadeOut('slow');
        $('#messageContainer').text();
        removeMessageLayer();
        return false;
    }, 5000);

然后在单击处理程序中，调用

clearTimeout（timeout）

取消超时

我已经用这个更新了你的。似乎有效

更新：代码不干净——我重复了一些事情。但我将把清理工作留作以后的练习。：）

试试这个：

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

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

演示：

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

fadeOut（）

另外，您的

removeMessageLayer（）

函数实际上根本没有删除消息元素——您只是认为它消失了，因为它已经消失了。你的代码

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

…表示如果body元素与传递给

remove（）

的选择器匹配，则删除该元素，当然它永远不会这样做。您需要

$（'#message'）。删除（），您不需要首先测试消息元素是否存在，因为jQuery在对空jQuery对象调用时基本上忽略了
.remove（）
。所以用这个：

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

代码将被（测试）

单击“X”可以正常工作……您必须确保没有单击小提琴角上的“结果”，然后它不会开火。@tymeJV正确，它确实有效，但当我添加延迟以在5秒后淡出DIV时，onClick不再工作。我想两者兼而有之——意思是，如果用户在5秒后没有关闭对话框，那么它将自动关闭。我将你的#message的CSS样式更改为
top:80
，以使其脱离
结果
指示器。请注意，你不需要
.queue（）
，你只需说
$（“#message”）。fadeIn（'slow'）。delay（5000）.fadeOut（“慢”）委托处理程序可能更明智，但在这种情况下，您不需要委托处理程序，因为OP的代码只调用了
。在创建相关元素后单击（）
。我只是在回答问题时尝试推广
最佳做法。你是对的，这不是必需的，但它是首选的，我编辑了我的答案以反映这一点。请注意，如果使用这样的委托处理程序，则应将该代码移出
displayMessage（）
函数，否则，每次显示消息时，它都会绑定其他处理程序。如果我刚刚删除了我的答案，您会更高兴吗？对不起。不，我认为委托处理人是一个很好的选择。就是这样！谢谢
$("#message").fadeIn('slow').delay(5000).fadeOut('slow'); // display message div
$('#message-close').click(function () {   // click close button
$('#message').stop().fadeOut('slow');

 return false;
});

$(document).on('keydown', function(e) {

if (e.keyCode === 27) {
   $('#message').stop().fadeOut('slow'); // close div when Esc key is pressed
      }
  });
});