.delay() JQ Home  <<  Effects  <<  .delay()

Function queues.

Description

The .dequeue() method is used to delay execution of subsequent items in the queue using a duration timer.

  • Only subsequent events in a queue are delayed. As an example the no-arguments forms of .show() or .hide(), which do not use the effects queue, will not be delayed.
  • The default queue is named 'fx' and has certain properties that are not shared with named queues:
    1. The 'fx' queue will automatically .dequeue() the next function on the queue and run it if the queue hasn't started.
    2. When .dequeue() is used on a function from the 'fx' queue, it will unshift() the string 'inprogress', into the [0] location of the array, thus flagging that the 'fx' queue is currently executing.
    3. Being the default, the 'fx' queue is called by .animate() and any other function that calls it by default.

Syntax

Signature Description
.delay( duration [, queueName] )Delay execution of subsequent items in the queue using a duration timer, optionally using a queue name to identify the queue.

Parameters

Parameter Description Type
durationA string or number determining the time the animation will run for.
  • Durations are given in milliseconds and the higher the value, the slower the animation.
  • The string 'slow' can be used which equates to 600 milliseconds.
  • The string 'fast' can be used which equates to 200 milliseconds.
Number
queueNameA string containing the name of the queue. Defaults to 'fx', which is the standard effects queue.String

Return

A jQuery object.

.delay( duration [, queueName] ) Example  Effects  <<  Top

Delay execution of subsequent items in the queue using a duration timer, optionally using a queue name to identify the queue.

In the example below when the button is pressed we animate the images below with a delay on the first image.


$(function(){
  $('#btn7').on('click', function() {
    $('#beef').slideToggle(1000) 
              .slideToggle("fast") 
              .delay(1000) 
              .slideToggle(1000) 
              .slideToggle("fast");
    $('#fish').slideToggle(1000) 
              .slideToggle("fast") 
              .slideToggle(1000) 
              .slideToggle("fast");
  });
});

a picture of Beef Pie      a picture of Fish Pie

Press the buttons below to action the above code:

In the example below when the button is pressed we toggle the image below. We then use a delay on the 'pastries' queue before retoggling. As this is not the default 'fx' queue, it needs dequeueing to show the image again, see the description above.


$(function(){
  $('#btn8').on('click', function() {
    $('#almond').slideToggle("fast")
                .delay(1000, 'pastries')
                .queue('pastries', function(next) {
       	          $(this).slideToggle(1000);
                  next();
                })
                .dequeue('pastries');
  });
});
a picture of almond slices

Press the buttons below to action the above code:

Related Tutorials

jQuery Intermediate Tutorials - Lesson 8 - Control Effects