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.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 28/01/2021
3176 People Used
Only 97 Left
Rating
5.0