Controlling Effects JQ Home  <<  JQ Intermediate  <<  Controlling Effects

In our final look at the effects jQuery has to offer we explore the methods and properties that allow us to control effects.

  • jQuery makes use of queues to control animation and we can use the default queue explained below or a custom queue we choose to create.
  • 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.
Controlling Effects Methods & Properties Description
Methods
.clearQueue()Remove all items from the queue that haven't been run yet.
.delay()Delay execution of subsequent items in the queue using a duration timer.
.dequeue()Execute the next queue function for the matched set.
.finish()Stop execution of the currently running animation, remove all queued animations and complete any remaining animations for the matched set.
.queue()Show or manipulate the function queue to be executed on the matched set.
.stop()Stop execution of the currently running animation on the matched set.
Properties
jQuery.fx.intervalThe animation firing rate in milliseconds.
jQuery.fx.offDisable all animations globally.

Controlling Effects Methods

The .clearQueue() Method Top

Remove all items from the queue that haven't been run yet.

We use this methods only signature .clearQueue( [queueName] ) in our examples below, which will remove all items from the queue that haven't been run yet, optionally using a queue name to identify the queue.

An example of using this method with a custom queue is available in the reference section.

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:'+=610'},1500);
	anImg.animate({top:'+=50'},1500);
	anImg.slideToggle(1000);
	anImg.slideToggle("fast");
	anImg.animate({left:'-=610'},1000);
	anImg.animate({top:'-=50'},1500);
  }
});
a picture of Apple and Blackberry Pie     

Press the buttons below to action the above code:

         

The .delay() Method Top

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

We use this methods only signature .delay( duration [, queueName] ) in our examples below, which will delay execution of subsequent items in the queue using a duration timer, optionally using a queue name to identify the queue.

An example of using this method with a custom queue is available in the reference section.

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:

The .dequeue() Method Top

Execute the next queue function for the matched set.

We use this methods only signature .dequeue( [queueName] ) in our examples below, which will execute the next queue function for the matched set. We will be using a custom queue for the example.

An example of using this method with the default 'fx' queue is available in the reference section.

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:"+=610"},1500);	
  });
  $('#masala').queue('curry', function() {
    $(this).slideToggle(1000);		
  });
  $('#masala').queue('curry', function() {
    $(this).slideToggle("fast");	
  });
  $('#masala').queue('curry', function() {
    $(this).animate({right:"-=610"},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:

The .finish() Method Top

Stop execution of the currently running animation, remove all queued animations and complete any remaining animations for the matched set.

We use this methods only signature .finish( [queueName] ) in our examples below, which will execute the next queue function for the matched set. We will be using the default 'fx' queue and a custom queue for the example.

Other examplea of using this method are available in the reference section.

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(){
  $('#btn29').on('click', function() {
    $('#banana').queue('cake', function(next) {
   	  $(this).show()
   	         .animate({bottom:'10'})
   	         .animate({right:'80'})
   	         .animate({right:'+=610'},1500)
             .animate({bottom:'+=50'},1500)
             .slideToggle(1000)
             .slideToggle("fast")
             .animate({right:'-=610'},1000)
             .animate({bottom:'-=50'},1500);
      next();
    })
    .dequeue('cake');
    animateImg3($('#baked'));
  });
  $('#btn30').on('click', function() {
    $('#banana').finish('cake');
  });
  function animateImg3() {
	$('#baked').animate({left:'+=610'},1500)
	           .animate({top:'+=50'},1500)
	           .slideToggle(1000)
	           .slideToggle("fast")
	           .animate({left:'-=610'},1000)
	           .animate({top:'-=50'},1500, animateImg3);
  }
});
a picture of Baked Chessecake      a picture of Banana Cake     

Press the buttons below to action the above code:

         

The .queue() Method Top

Show or manipulate the function queue to be executed on the matched set.

We will use the .queue( [queueName], callback( next ) ) signature in our example below, which will use a callback to manipulate the queue of functions to be executed on the matched elements, optionally using a queue name to identify the queue.

The second signature .queue( [queueName] ) will show the function queue, optionally using a queue name to identify the queue.

The third signature .queue( [queueName], newQueue ) will manipulate the queue of functions to be executed on the matched elements, optionally using a queue name to identify the queue.

Examples of these signatures are available in the reference section.

In the example below when the button is pressed we push elements from an array onto a queue we have created 'ourQueue'. We then pass this queue through a callback function, dequeueing each item to animate the image.


$(function(){
  $('#btn6').on('click', function() {
    var ourQueue = $({}), // jQuery on an empty object - a perfect queue holder
        queueArray = [function(){$('#chicken').slideToggle(1000);},
                      function(){$('#chicken').slideToggle("fast");}];
    $.each(queueArray, function(index, element) {
      ourQueue.push(element);
    }); 
    ourQueue.queue(function(next) { 
      $(this).dequeue();
      next();
    }); 
  });
});
a picture of Chicken Pie

Press the buttons below to action the above code:

The .stop() Method Top

Stop execution of the currently running animation on the matched set, optionally using a queue name to identify the queue and/or a boolean to indicate whether to remove queued animations and/or a boolean to indicate whether to complete the current animation immediately.

We use this methods only signature .stop( [queueName] [, clearQueue] [, jumpToEnd] ) in our example below, but just using the clearQueue parameter in our example.

Examples of using this method with all the other options available for its only signature can be found in the reference section.

In the example below when the left button is pressed we start animating the image below.

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(){
  $('#btn17').on('click', function() {
    animateImg2();
    showQueueFx();
  });
  $('#btn18').on('click', function() {
    $('#korma').stop(true);
  });
  function animateImg2(anImg) {
	anImg.show();
	anImg.animate({top:'10'});
	anImg.animate({left:'10'});
	anImg.animate({left:'+=610'},1500);
	anImg.animate({top:'+=50'},1500);
	anImg.slideToggle(1000);
	anImg.slideToggle("fast");
	anImg.animate({left:'-=610'},1000);
	anImg.animate({top:'-=50'},1500);
  }
});
a picture of Korma

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

Press the buttons below to action the above code:

         

Controlling Effects Properties

The jQuery.fx.interval Property Top

Modify the animation firing rate in milliseconds.

The jQuery.fx.interval property holds the animation firing rate in milliseconds.

  • The default value of jQuery.fx.interval is 13 milliseconds, but the property can be modified to adjust the number of frames per second at which animations will run.
  • Lowering the firing rate can make animations run smoother but may effect performance.
  • As jQuery uses one global interval, for any changes to the jQuery.fx.interval property to take effect, no animation should be running or all animations should be stopped first.
  • The jQuery.fx.interval property currently has no effect in browsers that support the requestAnimationFrame property.

In the example below when the left button is pressed we toggle the image below of thai green curry and the animation runs pretty smoothly at 1300 milliseconds.

Each time the right button is pressed we add 100 milliseconds to the jQuery.fx.interval property. Notice how the animation becomes choppier the more milliseconds we add to the jQuery.fx.interval property.

a picture of curry a picture of curry 

$(function(){
  $('#btn1').on('click', function() {
    $('#curry1').toggle(2000);
  });
  $('#btn2').on('click', function() {
    jQuery.fx.interval += 100;
  });
});

Press the buttons below to action the above code:

     

The jQuery.fx.off Property Top

Disable/enable all animations globally.

The jQuery.fx.off property disables/enables all animations globally.

  • The default value of jQuery.fx.off is false, which allows all animations to run normally.
  • When this property is set to true, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.

An example of using this property is available in the reference section.

Lesson 8 Complete

In this lesson we took a look at controlling jQuery effects.

Related Tutorials

jQuery Intermediate - Lesson 6: Basic & Custom Effects
jQuery Intermediate - Lesson 7: Fading & Sliding Effects

Reference

Methods

Events - .on() method
Traversal - .each() method
Traversal - .next() method
Traversal - .text() method
Effects - .animate() method
Effects - .clearQueue() method
Effects - .delay() method
Effects - .dequeue() method
Effects - .finish() method
Effects - .queue() method
Effects - .show() method
Effects - .slideToggle() method
Effects - .stop() method
Effects - .toggle() method

Properties

Effects - jQuery.fx.interval property
Effects - jQuery.fx.off property