Using a Queue

One way to make asynchronous functions run sequentially is to use a queue - this is what a queue is for and the default queue is used to make animations run sequentially on a single element. 

Is there any way we could use a queue to make animations on different elements run sequentially?

Of course there is as long as we are careful about when we call the next function. It has to be called when the animation is complete. 

First we need a custom queue that can be used to queue animations on different elements. Note that each element will still have its own default queue that makes the animations run sequentially this is an additional queue that makes the animations on different elements run sequentially. 

First we need an object that we can use as a universal queue.

 var seq = $({});

This object can support multiple queues if necessary but in this example we will just use one "q1". The first thing we have to do is add a function that runs the animation:

seq.queue("q1", function(next){
 $("#button1")
    .slideUp(5000)
     .delay(1000)
      .slideDown(5000,next);
  }
);

When it gets to run this causes the animation on button1 to start and this runs sequentially on the default queue. The only tricky bit is where to place the call to next. This is placed as the complete function in the final animation and this causes the next item in q1 to be dequeued.

You can do the same thing with the animation on another element and finally to get q1 started we need to make an explicit call to dequeue. For example:

var seq = $({});
seq.queue("q1", function(next){
   $("#button1")
    .slideUp(5000)
     .delay(1000)
      .slideDown(5000,next);
    }
);
seq.queue("q1", function(next){
   $("#button2")
    .slideUp(5000)
     .delay(1000)
      .slideDown(5000,next);
});
seq.dequeue("q1");

If you run this you will see button1 animate and then button2 animates. 

Once you have seen the method you can see that it can be generalized to start other animations at particular points in an animation. For example if you wanted to start the second button's animation at the end of the first slide up you would change the code to:

var seq = $({});
seq.queue("q1", function(next){
   $("#button1")
    .slideUp(5000,next)
     .delay(1000)
      .slideDown(5000);
    }
);
seq.queue("q1", function(next){
   $("#button2")
    .slideUp(5000)
     .delay(1000)
      .slideDown(5000,next);
});
seq.dequeue("q1");

You can even start multiple animations at different points by calling next more than once. 

jQuery For Animation?

There are more extensive libraries that are designed to make animation easy and polished. jQuery gives you some basic tools to create a fairly simple animated UI. Think of it as being something that is there as a part of using jQuery and something that you can use with little extra cost to add a bit of polish to the UI. If you plan to make animation a key part of the UI, or want to use animation in a game or something similar, then jQuery is almost certainly not sufficient for your purpose. 

Summary

• There are a set of animation functions that change the opacity of an element – generally called the "fade" animations.

• The simplest of the fade animation functions is fadeTo which will animate the opacity from its current value to the specified value.

• Easing is simply the speed at which the animation occurs. For example you could change the opacity slowly at first and then ever more quickly.

• There are two easing function provided by jQuery - linear, which changes the opacity or other animated property evenly through the time period, and swing, which starts and finishes gradually.

• Other animation functions can be used to animate many different properties and not just opacity,

• The show, hide and toggle operations change the visibility of an element. Used as animations they shrink and grow the element.

• The fadeIn, fadeOut and fadeToggle operations work in the same way but only animate the opacity. At the end of the animation the element is either hidden or shown.

• The slideDown, slideUp and slideToggle functions animate the height of the element.

• In all of the animations except for fadeTo the display property of the element is altered. If the element is being animated into the layout it is set to show at the start and this makes the other elements immediately adjust to take account of its new presence in the layout. If it is being animated out then at the end of the animation it is set to hide and removed from the layout.

• The animation queue makes sure that a set of animations on a single element occur one after another while animations on different elements are performed at the same time.

• To synchronize animations across elements you can use callbacks, additional function queues, or promises.