Controlling EffectsS2C Home « Controlling Effects

• <<    Fading & Sliding Effects
• jQuery General Utilities     >>

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

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

     

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

     

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:"+=410"},1500);	
  });
  $('#masala').queue('curry', function() {
    $(this).slideToggle(1000);		
  });
  $('#masala').queue('curry', function() {
    $(this).slideToggle("fast");	
  });
  $('#masala').queue('curry', function() {
    $(this).animate({right:"-=410"},1000);
  });
  $('#btn4').on('click', function() {
    var $curryQueue = $('#masala').queue('curry');
	$('#masala').dequeue('curry');
    $('#animspan3').text( $curryQueue.length );      
  });
});

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

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:'+=410'},1500)
             .animate({bottom:'+=50'},1500)
             .slideToggle(1000)
             .slideToggle("fast")
             .animate({right:'-=410'},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);
  }
});

           

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

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

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

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.

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

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 3.5 Intermediate - Lesson 6: Basic & Custom Effects
jQuery 3.5 Intermediate - Lesson 7: Fading & Sliding Effects

What's Next?

In the next lesson we look at the the general utilities jQuery provides and how we use them.

• <<    Fading & Sliding Effects
• jQuery General Utilities     >>