Animating jQueryUI Sortable using CSS3 transitions

Question

How can I use CSS3 transitions (or any other means) to make a jQuery Sortable act more like the list re-ordering in iOS, where list items smoothly animate while dragging, so items scurry out of the way as you drag?

[editing to turn this into an FAQ and save time for anyone else who wants to figure this out]

Answer 1

https://gist.github.com/801570 shows how to smoothly animate dragging using jQuery Sortable. Items scurry out of the way as you drag. It uses CSS3 Transitions and the effect was exactly what I am looking for. Very cool.

Here's the code:

JSFIDDLE:

http://jsfiddle.net/LTWMp/

HTML:

<style name="impostor_size">
    .marker + li { border-top-width:0px; }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS:

body { color:white; font-family:Helvetica, sans-serif;  padding: 10px}
ul { float:left; width:300px; overflow:hidden; border-radius:6px; }
li { display:block; position:relative; padding:12px 6px; z-index:1; margin:5px 20px; }
li:after { background:#18629D; display:block; position:absolute; height:100%; width:100%; top:0px; left:0px; content:' '; border-radius:6px; z-index:-1; }
li { -moz-transition:border-top-width 0.1s ease-in; -webkit-transition:border-top-width 0.1s ease-in; border-top:0px solid rgba(0,0,0,0); }
.marker { opacity:0.0; }

Script:

var stylesheet = $('style[name=impostor_size]')[0].sheet;
var rule = stylesheet.rules ? stylesheet.rules[0].style : stylesheet.cssRules[0].style;
var setPadding = function(atHeight) {
    rule.cssText = 'border-top-width: '+atHeight+'px'; 
};
$('ul').sortable({
    'placeholder':'marker',
    'start':function(ev, ui) {
        setPadding(ui.item.height());
    },
    'stop':function(ev, ui) {
        var next = ui.item.next();
        next.css({'-moz-transition':'none', '-webkit-transition':'none', 'transition':'none'});
        setTimeout(next.css.bind(next, {'-moz-transition':'border-top-width 0.1s ease-in', '-webkit-transition':'border-top-width 0.1s ease-in', 'transition':'border-top-width 0.1s ease-in'}));
    }
});

Answer 2

I've improved on all of the above by taking advantage of the 'change' function within the sortable api. This is the code. Check out the fiddle below to see the required css.

$('ul').sortable({
placeholder:'marker',
distance: 15,
cursor: 'move',
revert: 200,
start:function(ev, ui) {
   $(".marker").css({"height": "0px"});
    console.log("start");
},
change:function(ev, ui) {
    $(".marker").css({"height": "0px"});
    setTimeout(function(){
        $(".marker").css({"height": "40px"});
    },10);
} });

You can see the full code example here

http://jsfiddle.net/LTWMp/284/