decodeURI

jQuery Fx Queues plugin

There is a new version of this plugin for jQuery 1.2.x

Introduction

The jQuery Fx Queues plugin is a global queueing (duh!) system that
allows to enqueue effects of different elements, but also keeps jQuery’s default
queueing option.

A wait argument was also added to be able to
specify the time to wait before starting the animation.


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.


New arguments added to animate:

  • queue: (string) Name of the queue. If it doesn’t exist, it creates the new queue.
  • scope: (string) Name of the scope.
  • queuePosition: (”front”|”end”) Queue position where animation (or scope,
    if passed) is queued.
  • wait: (int) Milliseconds to wait before starting 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”,
wait: 500
});


Useful functions

Three functions were created to manage the queues, which can be found in the jQuery.fxQueues object.

  • jQuery.fxQueues.clear( queueName )
  • jQuery.fxQueues.start( queueName )
  • jQuery.fxQueues.stop( queueName )

Examples


Changelog

  • 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.

Leave a Reply