Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Learn to Use jQuery .delay() to Manage Your Effect Queues Better

Reading time 1 min
Published Jan 12, 2018
Updated Sep 27, 2019

jQuery delay: Main Tips

  • The jQuery .delay() function puts off the animation on the next queue item.
  • It can be used on both standard and custom queues.

Delaying an Effect

The jQuery .delay() function sets a delay before beginning to execute the animation on the next item in the effects queue.

Example
$("button").click(() => {
    $("div").delay("slow").fadeIn();
});

Here is the syntax you would use to make a jQuery .delay() function call:

$("selector").delay(speed,queue);

This method takes two arguments:

  • speed - the length of the delay. A higher numeric value means slower animation. You can also use keywords slow (600 ms) and fast (200 ms).
  • queue - the name of the animation queue to clear. The default value is fx, the standard effects queue.

Note: there is no specific method to cancel jQuery .delay() function call.