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

• <<    .delay()
• .finish()     >>

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

Parameters

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);
  }
});

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

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 );      
  });
});

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

Related Tutorials

jQuery Intermediate Tutorials - Lesson 8 - Control Effects

• <<    .delay()
• .finish()     >>