How to build an animation like Quicksand with jQuery only

I would like to have an animation like the one in Quicksand

Quicksand animation example

I do not want to use quicksand, because my setup is quite different 开发者_StackOverflow中文版and it makes everything way to complicated.

So if you would be able to give me a hint how this animation works and how I can get something like this going I would be very happy.

Thanks guys.

The basic concept behind it is to:

1. save the first collection for a moment, then load the second one with display:hidden.

2. Identify doublettes and hide everything else from the first collection.

3. Display the new collection, while keeping those that have doublettes hidden

4. Calculate the offset for the missing items, move the old ones to that position.

5. Unhide doublettes from new collection and remove old ones from DOM

This doesnt seem like super complicated. Though not exactly the same as the example you provided.

http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/

or

http://www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours