animate to float: visualizing position change

Question

I have a list of items which can be displayed both vertically and horizontally:

http://jsbin.com/olefi3/2

Currently, toggling between these two modes makes for a rather jarring user experience, since items are repositioned rather suddenly (as CSS classes are being applied/removed). It would help greatly to have each item gradually move to its new position, making it easier for users to keep their orientation.

I know jQuery's animate method doesn't work for float. While I can imagine a solution, it seems rather complex:

• create an invisible clone of each item
• apply the desired style (vertical/horizontal)
• record the clones' new position
• delete the clones
• animate the actual items to the recorded positions
• apply the desired style to the actual items
• remove inline styles from animation

Before I go about reinventing the wheel, does anything like this already exist?

Answer 1

Plugin you probably will like is isotope. Isotope will re-order content-blocks with CSS3 and fallback to jquery-animate. Check it out at: isotope

Answer 2

For starters, you need to include the jqueryui library right after you include the jquery library for the .toggleClass() call to animate at all

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

This gets you closer to what you are looking for.

Good Luck