Closing DIV after delay using jQuery

Question

I have an alert at the top of my website that has a close button. Here's the jQuery used for the close button:

/* CLOSE ALERT BAR WITH BUTTON */
$('a.ctp-alert').click(function () {
$("div.ctp-alert").slideUp();
});

It's working well on it's own, but I'm also trying to add another script, that will slide this DIV up after 5000 milliseconds. Here's the jQuery I'm using:

/* FADE OUT ALERT BAR AUTOMATICALLY */
$("div.ctp-alert").delay(5000).slideUp(500);

Both of the scripts are working on their own, but when using both of these scripts together, the close button stops working. It seems like the two are interfering with each other.

Any ideas on I could get these to work together? Thanks in advance.

Eric why exactly do you use the: $("div.ctp-alert").delay(5000).slideUp(500); for ? — John Skoumbourdis, Nov 11 '13 at 22:26
The idea was to delay this slideUp function for 5000 milliseconds – but slide up whether or not the "close" button is actually pressed. — Eric Wood, Nov 11 '13 at 22:29

score 1 · Accepted Answer · answered Nov 11 '13 at 22:29

You're not going to be able to use .delay() here unfortunately as you cannot cancel timers using $.delay.

Instead write it with setTimeout (a bit more ugly)

var timers = {};
$('a.ctp-alert').click(function () {
    $("div.ctp-alert").slideUp();
    clearTimeout(timers.hider);
    timers.hider = null;
});

timers.hider = setTimeout(function() {
   $("div.ctp-alert").slideUp(500);
   timers.hider = null;
}, 5000);

Closing DIV after delay using jQuery

1 Answers1