Question

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

我试图添加延迟：

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

哪个会起作用，但是'X'链接上用于关闭消息对话框的onClick事件不会触发。

非常感谢任何帮助。

Answer 1

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

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

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

根据成功创建消息，这将为您提供五秒钟的延迟。

Answer 2

可能不是最干净的，但您可以在setTimeout功能结束时添加displayMessage来电。

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

然后在您的点击处理程序中，调用clearTimeout(timeout)取消超时。

我已用此更新了您的fiddle。似乎工作。

UPDATE ：代码不干净 - 我重复了一些事情。但是我将把清理作为未来的练习。：）

Answer 3

试试这个：

$("#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()的单击处理程序中，淡出的元素已添加到延迟后排队。如果您致电.stop()，则会取消现有的排队效果，以便您立即执行fadeOut()。

你的removeMessageLayer()函数实际上并没有真正删除消息元素 - 你只是觉得它已经消失了，因为它已经消失了。你的代码

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

...如果它与传递给remove()的选择器匹配，则表示要移除body元素，这当然不会。您需要$('#message').remove();，并且您不需要首先测试消息元素是否存在，因为如果在空的jQuery对象上调用jQuery，则jQuery基本上忽略.remove()。所以使用这个：

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

Answer 4

代码将（测试）

$("#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
      }
  });
});

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

4 个答案: