jquery - 将 close 事件附加到已经附加了 fadeOut 的 div

Question

我实现了《jquery:从新手到忍者》一书中的“咆哮”弹出窗口示例，基本上它在浏览器中显示了一个咆哮风格的弹出窗口，可以通过单击其中的“关闭”链接来关闭该弹出窗口。该代码工作得很好，但我想通过在一段时间后如果用户从未单击它来关闭它而使弹出窗口淡出来改进它(必须继续关闭它们会变得相当烦人)。原始代码如下所示:

我的 HTML 中有这个简单的 div，并根据书中的示例对其进行了相应的样式

   <div id="message_box">
   </div>

这是 jquery 代码(同样直接来自书中):

/**
* function that adds notices to growl like message box in bottom right corner
*/
function addNotice(notice) {
   $('<div class="notice"></div>')
      .append('<div class="skin"></div>')
      .append('<a href="#" class="close">close</a>')
      .append($('<div class="content"></div>').html($(notice)))
      .hide()
      .appendTo('#message_box')
      .fadeIn(1000)
}

/**
* event handler for closing growl like message box
*/
$('#message_box')
   .find('.close')
   .live('click', function() {
      $(this)
         .closest('.notice')
         .animate({
            border: 'none',
            height: 0,
            marginBottom: 0,
            marginTop: '-6px',
            opacity: 0,
            paddingBottom: 0,
            paddingTop: 0,
            queue: false
         }, 1000, function() {
            $(this).remove();
         });
});


/* Give it a whirl */
$(document).ready(function() {
   addNotice("<p>Welcome</p>");
});

我只是像这样修改了 addNotice 函数，添加了带有延迟的 fadeOut (我也尝试过没有延迟，同样的问题):

function addNotice(notice) {
   $('<div class="notice"></div>')
      .append('<div class="skin"></div>')
      .append('<a href="#" class="close">close</a>')
      .append($('<div class="content"></div>').html($(notice)))
      .hide()
      .appendTo('#message_box')
      .fadeIn(1000)
/* This works but seems to disable the close functionality */
      .delay(10000).fadeOut(1000, function(){$(this).remove();});
} .delay(10000).fadeOut(1000, function(){$(this).remove();});

但是当我这样做时，关闭事件不再起作用；当您单击关闭链接时，该框不会关闭。它会在指定时间后淡出，但我希望用户可以使用这两个选项(立即关闭或让它淡出)。

有人可以告诉我我做错了什么吗？为什么关闭事件从未被触发/捕获？

干杯，马克。

Answer 1

您需要将 .clearQueue().stop() 添加到关闭操作中。动画按顺序执行，顺序执行，而不是并行执行。因为您对 fadeIn 进行排队，并立即对 fadeOut 进行排队，所以这两个操作都会在 close animate() 调用运行之前执行。 stop() 将停止当前动画(延迟或淡出)，clearQueue 将清空动画队列，因此您接下来调用的任何 animate 都将立即运行:

$('#message_box')
   .find('.close')
   .live('click', function() {
      $(this)
         .closest('.notice')
         .clearQueue()
         .stop()
         .animate({
            border: 'none',
            height: 0,
            marginBottom: 0,
            marginTop: '-6px',
            opacity: 0,
            paddingBottom: 0,
            paddingTop: 0,
            queue: false
         }, 1000, function() {
            $(this).remove();
         });
});