Search code examples
jqueryanimationjquery-plugins

jQuery moving a table row - Pretty effect


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,


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!