Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

jQuery plugin. Reorder and filter items with a nice shuffling animation.

branch: master

This branch is 0 commits ahead and 0 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.textile

Quicksand

jQuery plugin for reordering and filtering items with a nice shuffling animation like the one in this video.

Project site: http://razorjack.net/quicksand.

Demos & docs

Please visit the project site for live demos & documentation.

Usage

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: "easeInOutQuad",
		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 – put false if you don’t want to change the subject’s height during the process, default: true

You can specify a callback function as an optional last argument.

Dependencies

Browser compatibility

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.

I recommend using the plugin with HTML5 markup but any other option is fine.

Licensing

Copyright © 2010 Jacek Galanciak and agilope, released under both MIT and GPL version 2 license.

Something went wrong with that request. Please try again.