Reorder and filter items with a nice shuffling animation(Quicksand)

View Demo
Download

How it works

At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways:

• Use plain HTML, like an unordered list.
• Download data by an Ajax call
• Transform HTML items by JavaScript (for example, sort them differently)

Calling

$('#source').quicksand( $('#destination li') );

This will work for the following HTML:

<ul id="source">

<li data-id="iphone">iPhone OS</li>

<li data-id="android">Android</li>

<li data-id="winmo">Windows Mobile</li>

</ul>

<ul id="destination" class="hidden">

<li data-id="macosx">Mac OS X</li>

<li data-id="macos9">Mac OS 9</li>

<li data-id="iphone">iPhone OS</li>

</ul>

 
First container (source) is visible to the user. Second container (destination) is provided as the first argument of Quicksand.
You need data-id attributes so that the plugin can identify the same elements within source and destination collections. If elements exists in both collections (the same data-id), it’s the same to Quicksand.
If you want to include a callback function, add it as a last argument:

$('#source').quicksand( $('#destination li'), function() {

// callback code

});

 

Parameters

You can modify Quicksand by using optional parameters argument.

$('#source').quicksand( $('#destination li'), {

name: value

});

Or

$('#source').quicksand( $('#destination li'), {

name: value

}, function() {

// callback code

});

 
List of available params:

Name	Default	Description
adjustHeight	'auto'	Adjusts the height of container to fit all the items, 'auto' for automatically adjusting before or after the animation (determined automatically), 'dynamic' for height adjustment animation, false for keeping the height constant.
attribute	'data-id'	Attribute used to match items in collections. You can provide custom function to extract unique values (see the demos)
duration	750	How long the animation will take. In milliseconds.
easing	'swing'	Easing for the animation. Use jQuery easing plugin for more easing options.
enhancement	function() {}	If you wish to integrate their visual enhancements (eg. font replacement), specify a function that refreshes or re-applies enhancement to an item during the animation.
useScaling	true	Use scaling (CSS3 transform) animation. Requires to include this plugin to your project. Turned off automatically if you did not.

Performance

Version 1.2 features major performance tweaks out of the box. To improve performance, you can:

1. turn off useScaling option to stop using CSS3 transforms in the animation
2. stop using adjustHeight: 'dynamic' in favor of false or 'auto'.

Integration with other plugins

When your items have functional enhancements (eg. tooltips), remember to use callback to apply them on newly cloned objects:

$("#content").quicksand($("#data > li"),

{

duration: 1000,

}, function() { // callback function

$('#content a').tooltip();

}

);

When your items are visually enhanced (eg. font replacement), use enhancement function to refresh/apply the effect during the animation:

$("#content").quicksand($("#data > li"),

{

duration: 1000,

enhancement: function() {

Cufon.refresh('#content span');

}

}

);