Animate transitions for UI's sortable list

Question

I am working with an jQueryUI sortable list, and want to animate the transitions when lis are moved around as I drag an element up or down. As Apple have done it in their iPod app when rearranging a playlist's songs.

Is this possible? I've searched for hours, but cannot find anything useful.

Answer 1

I've put the code that user1754406 found on github into jsfiddle, it was just what I was looking for:

http://jsfiddle.net/samjones00/AbpJF/

Too much code to paste, please see the code on jsfiddle

Answer 2

The revert option is what you want I think.

http://api.jqueryui.com/sortable/#option-revert

The jQuery documentation is very well written and it looks like they are in the process of making it even better. Their methods are also very robust and usually have at the very least some callback event you can tap into to perform things. Make sure you always look there first!

Oh in case you need it, your code adds options like this:

$( "#sortable" ).sortable({
     revert:300,
     //other options you need go here, comma separated
});