Latest version (2.0.3) only works with jQuery 1.3.x. Check the releases for earlier versions that work with jQuery 1.0.x and 1.2.x

Introduction

The new version of this plugin is based on a script John Resig started some time ago (I came across his code afterlaunching the first version of this plugin). I adapted the code and added the scope stuff, created a new example page and also created some unit tests (which need some improvement, but are a good start). If you find any bugs or have doubts or comments, feel free to contact me.

Download

Queues

A queue is an array that may contain animations to perform and/or scopes. You just have to pass its name (with the animate’s “queue” argument) to add an animation to a queue. If the queue doesn’t exist, then it creates it automatically. In case a name is not passed, then a queue for the element is created.

Scopes

What happens if you needed to enqueue not a single effect, but a group of effects to be played altogether? This is where scopes come to save the day. A scope is an object that can be contained in a queue. It is an array that contains only animations to perform. When a scope is dequeued, it automatically plays all the animations it contains. You just have to pass its name (with the animate’s “scope” argument) to add an animation to a queue’s scope. If the scope doesn’t exist, then it creates it automatically.

animate arguments:

  • queue: (string) Name of the queue. If it doesn’t exist, it creates the new queue. If you pass false no queue is created.
  • scope: (string) Name of the scope.
  • position: (”front”|”end”) Queue position where animation (or scope, if passed) is queued.
  • preDelay: (int) Milliseconds to wait before starting the next in queue.
  • postDelay: (int) Milliseconds to wait after finishing the animation.

Usage:

animate(properties, speed, easing, callback, queue, scope, queuePosition, wait)

$(”#myId”).animate( {marginLeft: “10px”}, {speed: 500, queue: “first” }); Since these arguments are available in the new animate implementation, they can be used in the other effects, like:

$(”#myId”).fadeIn({ speed: 500, queue: “first”, scope: “global”, preDelay: 500 });

Working with the queues

Now you have a $.fxqueue(”queueName”) to get the queue. The object has three useful methods:
  • $.fxqueue(”queueName”).pause()
  • $.fxqueue(”queueName”).start()
  • $.fxqueue(”queueName”).stop() (The queue is cleared.)

Check it out:

Changelog

  • 02-15-2009:
    • Version 2.0.3: Works now with jQuery 1.3.x
  • 04-13-2008:
    • Version 2.0.2: [Fix] Check that animate is not being called by a null selection.
    • Version 2.0.1: [Fix] Check that complete arg is a function before applying it.
  • 03-13-2008:
    • Version 2.0: Completely rewritten, based on John Resig’s code.
  • 11-21-2007:
    • Renamed functions (start, stop and clear)
    • Fixed stop method when stopping an animation queued with a wait time.
  • 11-19-2007: First release.