Search code examples
jquerydelayinterrupt

jQuery delay function interrupt

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?

Solution

  • 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.