.clearQueue() JQ Home  <<  Effects  <<  .clearQueue()

• <<    .animate()
• .delay()     >>

Function queues.

Description

The .clearQueue() method is used to remove all items from the queue that haven't been run yet.

• When used with no arguments the .clearQueue() method will remove any remaining functions from the default queue 'fx'. When used in this fashion the .clearQueue() method is similar to the .stop(true) signature with the following provisos:
  • The .stop() method is meant to be used solely with animations.
  • The .clearQueue() method can be used to remove any function that has been added to a generic jQuery queue with the .queue() method.
• 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.

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

Remove all items from the queue that haven't been run yet, optionally using a queue name to identify the queue.

In the example below when the left button is pressed we animate the image of apple and blackberry pie.

If the image is animating when the right button is pressed we clear the animation queue, which in this case is the default 'fx' effects queue.

$(function(){
  $('#btn9').on('click', function() {
    animateImg2($('#apple'));
  });
  $('#btn10').on('click', function() {
    $('#apple').clearQueue();
  });
  function animateImg2(anImg) {
	anImg.show();
	anImg.animate({top:'10'});
	anImg.animate({left:'10'});
	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);
  }
});

     

In the example below when the left button is pressed we animate the left image of baked cheesecake which used the default 'fx' queue and the right image of banana cake which uses a custom queue we call 'cake'. The left image of baked cheesecake is called recursively at the end of the function containing its animation and will run ad infinitum. The right image runs through its animations and stops.

When the right button is pressed, if the image is animating at the time, we clear the animation queue for the custom 'cake' queue and stop all animation on this queue. Notice how this has no effect on the default 'fx' queue.

$(function(){
  $('#btn11').on('click', function() {
    $('#banana').queue('cake', function(next) {
   	  $(this).show()
   	         .animate({bottom:'10'})
   	         .animate({right:'80'})
   	         .animate({right:'+=240'},1500)
             .animate({bottom:'+=50'},1500)
             .slideToggle(1000)
             .slideToggle("fast")
             .animate({right:'-=240'},1000)
             .animate({bottom:'-=50'},1500);
      next();
    })
    .dequeue('cake');
    animateImg3($('#baked'));
  });
 
  $('#btn12').on('click', function() {
    $('#banana').clearQueue('cake').stop(true, true);
  });
 
  function animateImg3() {
	$('#baked').animate({left:'+=240'},1500)
	           .animate({top:'+=50'},1500)
	           .slideToggle(1000)
	           .slideToggle("fast")
	           .animate({left:'-=240'},1000)
	           .animate({top:'-=50'},1500, animateImg3);
  }
});

           

Related Tutorials

jQuery Intermediate Tutorials - Lesson 8 - Control Effects

• <<    .animate()
• .delay()     >>