.dequeue() JQ Home  <<  Effects  <<  .dequeue()

Function queues.

Description

The .dequeue() method is used to execute the next queue function for the matched set.

  • 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
.dequeue( [queueName] )Execute the next queue function for the matched set, optionally using a queue name to identify the queue.

Parameters

Parameter Description Type
queueNameA string containing the name of the queue. Defaults to 'fx', which is the standard effects queue.String

Return

A jQuery object.

.dequeue( [queueName] ) Examples Effects  <<  Top

Execute the next queue function for the matched set, optionally using a queue name to identify the queue.

In the example below when the button is pressed we move the image below of korma around the screen using the default 'fx' queue. We display the queue length and also the the action on the currently animating action which will have the value 'inprogress'. Notice how each item on the queue is automatically dequeued as described in the description above.


$(function(){
  var $korma = $('#korma');
  $('#btn3').on('click', function() {
    animateImg1($korma);
    showQueueFx();
  });
  function animateImg1(anImg) {
    anImg.animate({left:'+=240'},1500);
    anImg.animate({top:'+=50'},1500);
    anImg.slideToggle(1000);
    anImg.slideToggle("fast");
    anImg.animate({left:'-=240'},1000);
    anImg.animate({top:'-=50'},1500);
  }
  function showQueueFx() {
    var fxQueue = $korma.queue('fx');
    $('#animspan1').text( fxQueue.length );      
    $('#animspan2').text( fxQueue[0] );      
    setTimeout(showQueueFx, 100);
  }
});

a picture of Korma

Default queue (fx). The queue length is: . Currently animating function:

Press the buttons below to action the above code:

In the example below when the button is pressed we dequeue one item from the queue named 'curry'. Keep clicking the button to see each animation.


$(function(){
  $('#masala').queue('curry', function() {
    $(this).animate({right:"+=240"},1500);	
  });
  $('#masala').queue('curry', function() {
    $(this).slideToggle(1000);		
  });
  $('#masala').queue('curry', function() {
    $(this).slideToggle("fast");	
  });
  $('#masala').queue('curry', function() {
    $(this).animate({right:"-=240"},1000);
  });
  $('#btn4').on('click', function() {
    var $curryQueue = $('#masala').queue('curry');
	$('#masala').dequeue('curry');
    $('#animspan3').text( $curryQueue.length );      
  });
});

a picture of Masala

Named queue (curry).The queue length is: .

Press the buttons below to action the above code:

Related Tutorials

jQuery Intermediate Tutorials - Lesson 8 - Control Effects