jQuery delay function interrupt

Question

I have a pop-up window in jQuery that fades in, and will fade out in 10 seconds if not dismissed by the user.

I have the code:

$modalElement.fadeIn(1000).delay(10000).fadeOut(1000);

And this works fine for the fade in, delay and fade out - but the 'close' button on the form doesnt work until after the timeout!

I need the 'close' button to interupt the delay, so that the user can read the pop up and close it themselves, say, at 5 seconds - and then if they havent closed it themselves, then it will close automatically after the 10 second delay.

Any ideas how to do this?

add the code for your close button - it should interrupt this code automatically. — ahren
– ahren, Commented Jun 8, 2012 at 7:43

Alessandro Vendruscolo · Accepted Answer · 2012-06-08 08:10:09Z

8

You can use the .clearQueue() method.

In your close handler you can do this:

$modalEleement.clearQueue();

By default, both .delay() and .clearQueue() operate on the fx queue, but you can pass custom queue names.

answered Jun 8, 2012 at 8:10

Alessandro Vendruscolo

14.9k4 gold badges34 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

R2D2 Over a year ago

This does seem to work, and allows me to close the window before the delay - but it seems that the delay is still running in the background. For example, if I open the window and start the delay running, then close the window after 4 seconds, and then reopen the window after another 4 seconds, then the window will automatically close 2 seconds later - so the 10 second counter is obviously still running. Dont understand why that is!

R2D2 Over a year ago

I have now managed to get the overall effect working by using an animate function and the using the stop command to close the pop up. This seems to give the best overall performance so far.

Michael Koper · Accepted Answer · 2012-06-08 08:14:31Z

0

Just add a click event on the close button with a dequeue.

For example:

$modalElement.fadeIn(1000).delay(10000).fadeOut(1000);

$modalElement.find('a.close').click(function(){
  // If you want fadeout being triggerd
  $modalElement.dequeue() 
  // If you just want to delete the box without the fadeOut
  $modalElement.remove() 
});

edited Jun 8, 2012 at 8:14

answered Jun 8, 2012 at 8:07

Michael Koper

9,8217 gold badges48 silver badges61 bronze badges

1 Comment

Alessandro Vendruscolo Over a year ago

Doing this will call anyway the fadeOut after ten seconds.

Collectives™ on Stack Overflow

jQuery delay function interrupt

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related