2

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

我试图添加延迟：

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

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

任何帮助将不胜感激。

4

4 回答 4

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

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

于 2013-07-16T13:13:01.950 回答
2

可能不是最干净的，但您可以在函数setTimeout末尾添加一个调用。displayMessage

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

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

我已经用这个更新了你的小提琴。似乎工作。

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

于 2013-07-16T13:16:38.447 回答
2

试试这个：

$("#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()函数实际上根本没有删除 message 元素 - 您只是认为它已经消失了，因为它已经淡出。你的代码

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

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

function removeMessageLayer() {
    $('#message').remove();
}
于 2013-07-16T13:21:11.730 回答
2

代码将（测试）

$("#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
      }
  });
});
于 2014-01-21T02:23:19.053 回答