Question

I’m using jquery to animate a bit my web site, but I’m having a little issue with some behaviour:

I have a div, which suddenly appears from the top of the page and shakes:

$(minipopup).animate({
    marginTop: '+=' + (240) + 'px'
}, 1000);

$(minipopup).effect("shake");

This mini popup has an X for closing it, or else, it will auto close after a few seconds:

setTimeout(function() {
        $('#minipopup').effect("explode");          
                    }, 10000); 

$('#closePopup').click(function() {
        $('#minipopup').effect("explode");
                    });

Everything works, except that, if the user clicks the CLOSE button, he sees the explode effect and the popup effectively dissapears, but after the 10 seconds pass (the one I defined under the setTimeout), the user again sees the popup explosion (just the effect, cause the popup is not there visually). How could I avoid that “ghost” explosion if the user already closed the popup manually?

Thanks in advance.

Answer 1

You can change your click handler slightly, like this:

$('#closePopup').click(function() {
   $('#minipopup').effect("explode", function() {
     $(this).remove();
   });
});

This works if you don’t need the element again.

Alternatively, if you need the element again, tell your setTimeout() function to only do the effect if the element’s still visible using the :visible selector, like this:

setTimeout(function() {
    $('#minipopup:visible').effect("explode");          
}, 10000); 

In either of these the selector will stop matching an element you don’t want to animate anymore.