About delay method
Delay comes under the custom effect category in jQuery. Its sole use is to delay the execution of subsequent items in the execution queue. Its syntax is:
.delay( duration [, queueName ] )
duration is the amount of delay to insert in between the events.
queueName is a name of the queue in which the delay time is to be inserted. By default it is a "fx" queue. A "fx" queue is also known as an effects queue.
This method is added in jQuery v 1.4, it allows the execution of subsequent items to be delayed. This method can be used with an effect queue as well as with a custom queue.
Another important point is only those methods that can be delayed that are in a queue. For example "show()" and "hide()" doesn't use the effect queue so they can't be delayed using a delay with the effects queue. Whereas "fadeIn()" and "fadeOut()" uses the effects queue so they can be delayed using a delay.
Duration is provided in milliseconds. The higher the duration the slower the animation speed and the lower the duration the higher the animation speed.
Throughout this article I'll be working with the following HTML and CSS.
Queue in delay
By default a delay method assumes "fx" or the effects queue. Most effects are processed through the "fx" queue. But not all the DOM manipulation methods use these fx tools. To add a delay in these methods we need to explicitly provide a queue name or we can use an anonymous queue.
For instance consider the following code snippet:
In the code above hide will be executed without any delay since it manipulates the display property of an element. To overcome this issue we can use the anonymous queue. Check the following code.
Using delay in Chaining
Chaining is a way of executing a series of functions on an element in one statement. A delay is often used while chaining the several effects on an element.
Example 1 Delay with duration
Example 2 Delay with Queue
In the preceding example all the effects are run through the "myq" queue, not from the default "fx" queue. the last line "dequeue" is required to execute all the functions pumped in a queue.
That's all for this article. I hope you have found it useful. Don't forget to comment and share.