Attach a close event to a div that already has fadeOut attached to it

Question

Hi,

I implemented the "growl" popup example from the book "jquery: novice to ninja", basically it shows a growl style popup in your browser which can be closed by clicking on a "close" link in it. The code works great but I want to improve it by having the popup fadeOut after some time IF the user never clicked on it to close it (it can get rather annoying to have to keep closing them). The original code looks like this:

I have this simple div in my HTML and styled it accordingly as per the example in the book

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

and here is the jquery code (again straight from the book):

/**
* 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>");
});

I simply modified the addNotice function like this, adding the fadeOut with a delay (I also tried without the delay, same issue):

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

but when I do this, the close event is not working anymore; when you click on the close link, the box isn't closing. It will fade out after the specified time, but I would like to have both options available to the users (close immediately or just have it fade).

Can somebody please tell me what I am doing wrong? Why is the close event never triggered/caught?

Cheers, Mark.

Answer 1

You need to add .clearQueue().stop() to the close action. Animations are executed in order, sequentially, and not in parallel. Because you queue a fadeIn, and immediately a fadeOut, both of those will execute before your close animate() call runs. stop() will stop the current animation (the delay or the fadeout), clearQueue will empty the animation queue so whatever animate you call next will run immediately :

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