Learn To Use JQuery .delay() To Manage Your Effect Queues Better

🔥 BitDegree partnered with Ogvio - a free international money transfer service! Join the waitlist & grab Rewards! 🎁

Code has been added to clipboard!

Home| jQuery | jQuery Methods and Properties| .delay() 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 Copy $("button").click(() => { $("div").delay("slow").fadeIn(); }); Try it Live Learn on Udacity

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.

Previous Topic Next Topic

jQuery

Learn jQuery Introduction Selectors Events Event Methods Download Callback Chaining Get and Set Add Element Remove Element Traverse Parent Children Sibling Traverse Filtering jQuery AJAX

jQuery Effects and Animations

Effects Show and Hide Fade Effect Slide Effect Animate Effect Manipulate CSS Width and Height

jQuery Methods and Properties

.addClass() .after() .animate() .append() .appendTo() .attr() .before() .bind() (deprecated) .blur() .change() .click() .clone() .css() .dblclick() .delay() .delegate() and .undelegate() (deprecated) .detach() .empty() .end() .error() (deprecated) .fadeIn() .fadeOut() .fadeTo() .fadeToggle() .finish() .focus() .focusIn() .focusOut() .hasClass() .height() .hide() .hover() .html() .innerHeight() .innerWidth() .insertAfter() .insertBefore() .keypress() .keyup() .live() and .die() (deprecated) .load() (deprecated) .mousedown() .mouseenter() .mouseleave() .mousemove() .mouseout() .mouseover() .mouseup() .off() .offset() .offsetParent() .on() .one() .outerHeight() .outerWidth() .position() .prepend() .prependTo() .prop() .proxy() .queue() .ready() .remove() .removeAttr() .removeClass() .removeProp() .replaceAll() .replaceWith() .resize() .scroll() .scrollLeft() .scrollTop() .show() .slideDown() .slideToggle() .slideUp() .stop() .submit() .text() .toggle() .toggleClass() .trigger() .triggerHandler() .unbind() (deprecated) .unload() (deprecated) .unwrap() .val() .width() .wrap() Event Properties event.currentTarget event.preventDefault() event.relatedTarget event.stopImmediatePropagation() event.stopPropagation() event.target event.timeStamp event.type event.which jQuery .find() jQuery .keydown() jQuery.noConflict() pageY and pageX

Best-rated MOOCs to Learn Programming:

9.8 Read review 9.6 Read review 9.4 Read review

Related Code Examples

jQuery

Use of jQuery .focus()

jQuery

Use of jQuery .keydown()

jQuery

Use of jQuery .fadeIn()

jQuery

Passing $ as a Parameter With jQuery.noConflict()

jQuery

Use of jQuery .hasclass()

jQuery

Use of jQuery .outerheight()

SEND MONEY WITH THE BEST RATES

Join Ogvio & Make Low-Fee Transfers, Instantly Days Hours Minutes Seconds START NOW x