jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – adding a single function to the queue

Let's see how easy it is to add a new function to the end of the queue.

1. Update the script in queue.html so that it appears as follows:

   $("#fader").fadeOut(function() {
   
     $(this).queue(function() {
       $(this).css("backgroundColor", "green");
     });
   
   }).fadeIn().fadeOut().fadeIn();

2. Save the new file as queueAdd.html.

What just happened?

By supplying a callback function as the optional second argument to the queue() method, we add the function to the end of the animation queue. When we run the code in a browser the animation should proceed as normal; then once the effects have run, the <div> will turn green.

We don't need to supply the name of the queue unless it differs from the default fx queue. In ...