Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
114 lines (104 sloc) 4.69 KB
---
layout: post
title: jQuery FxQueues plugin 2.0
tags: []
---
<div class="storycontent">
<blockquote>Latest version (2.0.3) only works with jQuery 1.3.x. <a href="http://plugins.jquery.com/project/fxqueues" target="_blank">Check the releases</a> for earlier versions that work with jQuery 1.0.x and 1.2.x</blockquote>
<h2>Introduction</h2>
The new version of this plugin is based on <a href="http://dev.jquery.com/%7Ejohn/plugins/fxqueue/" target="_blank">a script John Resig started some time ago</a> (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.
<hr />
<h2>Download</h2>
<ul>
<li><a href="http://plugins.jquery.com/files/jquery.fxqueues-2.0.3.js.txt">Code (6,86 KB)
</a></li>
<li><a href="http://plugins.jquery.com/files/jquery.fxqueues-2.0.3.zip">Source, example and tests (44,0 KB)</a></li>
</ul>
<hr />
<h2>Queues</h2>
A queue is an array that may contain <strong>animations to perform</strong> and/or
<strong>scopes</strong>.
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.
<hr />
<h2>Scopes</h2>
What happens if you needed to enqueue not a single effect, but a group of effects
to be played altogether? This is where <strong>scopes</strong> come to save the day.
A scope is an object that can be contained in a queue. It is an array that contains
<strong>only</strong> 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.
<hr />
<h2><a href="http://docs.jquery.com/Effects/animate"><em>animate</em></a> arguments:</h2>
<ul>
<li><strong>queue</strong>: <span class="type">(string)</span> Name of the queue. If it doesn’t exist, it creates the new queue. If you pass <strong>false</strong> no queue is created.</li>
<li><strong>scope</strong>: <span class="type">(string)</span> Name of the scope.</li>
<li><strong>position</strong>: <span class="type">(”front”|”end”)</span> Queue position where animation (or scope,
if passed) is queued.</li>
<li><strong>preDelay:</strong> (int) Milliseconds to wait before starting the next in queue.</li>
<li><strong>postDelay:</strong> (int) Milliseconds to wait after finishing the animation.<strong>
</strong></li>
</ul>
<hr />
<h2>Usage:</h2>
animate(properties, speed, easing, callback, queue, scope, queuePosition, wait)
<p class="code">$(”#myId”).animate(
{<strong>marginLeft:</strong> “10px”},
{<strong>speed:</strong> 500,
<strong>queue:</strong> “first”
});
Since these arguments are available in the new
<strong><em>animate</em></strong> implementation,
they can be used in the other effects, like:
<p class="code">$(”#myId”).fadeIn({
<strong>speed:</strong> 500,
<strong>queue:</strong> “first”,
<strong>scope:</strong> “global”,
<strong>preDelay:</strong> 500
});
<hr />
<h2>Working with the queues</h2>
Now you have a<strong> $.fxqueue(”queueName”)</strong> to get the queue. The object has three useful methods:
<ul>
<li><strong>$.fxqueue(”queueName”).</strong><strong>pause()</strong></li>
<li><strong>$.fxqueue(”queueName”).</strong><strong>start()</strong></li>
<li><strong>$.fxqueue(”queueName”).</strong><strong>stop() </strong>(The queue is cleared.)</li>
</ul>
<hr />
<h2>Check it out:</h2>
<ul>
<li><a href="http://lucianopanaro.com/fxqueues2.0/2.0.3/example.html" target="_blank">View an online example</a></li>
<li><a href="http://lucianopanaro.com/fxqueues2.0/2.0.3/test/index.html" target="_blank">Run the tests
</a></li>
</ul>
<hr />
<h2>Changelog</h2>
<ul>
<li><strong>02-15-2009:</strong>
<ul>
<li>Version 2.0.3: Works now with jQuery 1.3.x</li>
</ul>
</li>
<li><strong>04-13-2008:</strong>
<ul>
<li>Version 2.0.2: [Fix] Check that animate is not being called by a null selection.</li>
<li>Version 2.0.1: [Fix] Check that complete arg is a function before applying it.</li>
</ul>
</li>
<li><strong>03-13-2008:</strong>
<ul>
<li>Version 2.0: Completely rewritten, based on John Resig’s code.</li>
</ul>
</li>
<li><strong>11-21-2007</strong>:
<ul>
<li>Renamed functions (start, stop and clear)</li>
<li>Fixed stop method when stopping an animation queued with a wait time.</li>
</ul>
</li>
<li><strong>11-19-2007</strong>: First release.</li>
</ul>
</div>