jQuery moving a table row - Pretty effect

animation, jquery, jquery-plugins

Solution

I managed to solve this using a few library's and made it look pretty good. What is in fact happening is a duplicate table is being made in the background, then an animation is applied and the two tables are swapped.

See http://jsfiddle.net/NP4t3/1/ and vote people up or down!

It was based on work from http://www.scottlogic.co.uk/2011/01/animating-html-ranking-tables-with-javascript/ and then I added automatic sorting!

All the code is in the fiddle (including the library's), hope this is of use to someone!

Problem

I'm working on a simple suggestion voting system where users can +1 or -1 suggestions (in a similar way to how stack-overflow rates questions). These suggestions are presented in a long table and the +1 or -1 is done through ajax, as the table is sorted by the amount of votes an item has, when one is +1 or -1'd the table loses it's order. I am aware I can use the table sorter jQuery plugin to fix this but it makes it very easy to lose the item you +-'d, do you know how to move the row up/down the table while following it? (Perhaps similar to the way ordering is done on the iPhone?) with a slick animation? Thanks for your time,

Original source