jQuery plugin for reordering and filtering items with a nice shuffling animation like the one in this video.
Project site: http://razorjack.net/quicksand.
Please visit the project site for live demos & documentation.
The following example would filter items in #content with shuffling animation, leaving only CMYK colors.
$("#content").quicksand($("#data > li"), { // all the parameters have sensible defaults // and in most cases can be optional duration: 1000, easing: "swing", attribute: "data-id", } );
The markup could look like this:
<ol id="content" class="grid"> <li data-id="red">Red</li> <li data-id="green">Green</li> <li data-id="blue">Blue</li> <li data-id="black">Black</li> <li data-id="white">White</li> <li data-id="yellow">Yellow</li> <li data-id="cyan">Cyan</li> <li data-id="magenta">Magenta</li> </ol> <ol id="data" style="display: none;"> <li data-id="cyan">Cyan</li> <li data-id="magenta">Magenta</li> <li data-id="yellow">Yellow</li> <li data-id="black">Black</li> </ol>
Please note that you need to set additional attribute (you can specify which one in options hash, by default it’s data-id) so that the plugin can identify same elements within source and destination collections.
No additional CSS is required for the plugin to work. However, you should avoid styling the subject container using id selectors - please use class instead.
- the subject (
#content
) is a container visible for the user - the first parameter (
$("#data > li")
) should contain a collection which will replace contents of the subject duration
– specifies duration (in milliseconds) of the animation effect, default:750
easing
– animation easing effect, default:'swing'
attribute
– attribute containing unique value able to identify same item within source and destination collection, default:'data-id'
adjustHeight
–'dynamic'
to animate height of the container (when the target collection is larger or smaller than source collection),'auto'
to automatically set height before or after the animation,false
to keep container height constant; default:'auto'
useScaling
– use CSS3 scaling effect, default: trueenhancement
– function that performs custom visual enhancements (eg. font replacements) on newly created items, default:function() {}
queue
– manager if user want to run the animations in parallel(set it to false) or not (set it to true).function
– Function that must be to return the duration time. This function receive theduration
as unique parameter. (Example: you can use it with Gauss function in http://vorlon.case.edu/~vxl11/software/gauss.html)
You can specify a callback function as an optional last argument.
- jQuery 1.3+
- Optional: jQuery Easing (http://gsgd.co.uk/sandbox/jquery/easing/) for additional easing options
- Optional: jquery-animate-css-rotate-scale.js (www.zachstronaut.com) for additional CSS3 scaling animation; works fine without this plugin (utilizes fade efect instead)
Tested under:
- Safari 4
- Chrome 4
- Firefox 3.5
- Opera 10.15
- Internet Explorer 7
- Internet Explorer 8
No Internet Explorer 6 support is planned. Ever. The plugin, however, does not break your web application on IE6, it just skips the animation and replaces the collection immediately.
I recommend using the plugin with HTML5 markup but any other option is fine.
If you don’t like HTML5 data-* attributes, you can specify a function instead.
$("#content").quicksand($("#data > li"), { // all the parameters have sensible defaults // and in most cases can be optional duration: 1000, easing: "swing", attribute: "data-id", attribute: function(v) { // different src of img means: different object return $(v).find('img').attr('src'); } } );
Quicksand works fine with other plugins. Please note that:
- 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 during the animation
$("#content").quicksand($("#data > li"), { duration: 1000, enhancement: function() { Cufon.refresh('#content span'); } } );
Copyright © 2010 Jacek Galanciak and agilope, released under both MIT and GPL version 2 license.