🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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.