Time for action - viewing the queue

Let's look at a basic example of the use of the queue() method and the type of results we can expect to obtain.

  1. In the <head> of our template file add the following code:
    <style>
  #fader { width:100px; height:100px; background-color:#000; }
</style>
  2. Finally, in the anonymous function at the bottom of the second <script> element, add the following code:
    $("#fader").fadeOut(function() {

  console.log($(this).queue());

}).fadeIn().fadeOut().fadeIn();
  3. Save the page as queue.html.

What just happened?

Typically, we'd use an external stylesheet for any styling, but for a single selector and three rules, it seems pointless creating a separate file. In the script we have four effects chained together to form a simple animation ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial