Fx.Sort

docs

This effect will rearrange a group of elements using a transition. Note: this effect is not recommended for very large sets of elements.

Elements must all be contained by the same parent, and it will work best if these elements are the only children in that parent (for instance, all the list items in a list). Additionally, the effect will set their position to be relative if they are not positioned. Absolutely positioned elements will likely have trouble (I haven't tested that out yet).

Here's what it looks like to create one:

var mySort = new Fx.Sort($$('ul li'));
mySort.sort([3,2,1,0]); //specify a specific order
mySort.forward(); //0,1,2,3,etc.

Here's a quick demo (I've already created the instance of the effect for this demo):

1. (0) stuff
2. (1) more stuff
   really
3. (2) still more stuff
4. (3) loads o stuff
5. (4) blah
   blah
   blah

forward | backward | 3,4,2,0,1 | 2,3,0,1,4

Transition: Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Bouncing Back Elastic easeIn easeOut easeInOut duration:

In addition to specifying a new order using numbers, there are some other methods.

vert.forward(); //0,1,2,3,etc.

vert.forward(); //0,1,2,3,etc.

vert.backward(); //3,2,1,0

vert.backward(); //3,2,1,0

vert.swap(3,1);

vert.swap(3,1);

vert.reverse(); //reverses the current order

vert.reverse(); //reverses the current order

Finally, you can sort a list and then rearrange the DOM so that the new sort is reflected in the body of the document.

vert.backward().chain(vert.rearrangeDOM.bind(vert));

vert.backward().chain(vert.rearrangeDOM.bind(vert));