How to imitate a sort event with animation using jQuery?

I've got a list of items, each containing a checkbox. When a checkbox is ticked I'd like that item to sort itself to the beginning of the list, preferably animating as if it were being dragged with the mouse (but without 开发者_C百科a mouse cursor).

Is this possible? I've had trouble triggering draggable/sortable events in the past. I'm open to alternate solutions, it just need to be obvious where the item has moved to.

Edit: I was originally trying to ask how to make this happen on a jQuery sortable() list, but I obviously didn't communicate that very well, so I've updated the question to match all the wonderful answers.

Similar to avetarman's second example, this fiddle doesn't wait for the newly checked box to reach the top before the other ones take their rightful place. Instead, they all get animated together:

http://jsfiddle.net/ebiewener/Y5Mdt/1/

Ultimately, it's all about giving the row you're moving an absolute position so that it can slide up over the other rows, while giving the necessary CSS attributes to those other rows so that they don't immediately jump out of place when the selected row is removed from the document flow with the absolute positioning. Once that is done, the selected row loses it's absolute positioning, but is appended to the beginning of the rows. This allows all the css to essentially be "reset", so that you can proceed selecting new rows.

Check this fiddle. No plugin is used here.

http://jsfiddle.net/bN8x6/

Check this update as well. It uses relative positioning. So, during animation the placeholder is being kept.

http://jsfiddle.net/bN8x6/1/

jQuery ui has a transfer animation.

Quick jsfiddle here.

You could use this to immitate the sort then on the callback move the actual checkbox. I will update the demo when I get home to use a list of checkboxes to do the sort.

Try this.

$('#mytest li').click(function() {
    var $this = $(this);
    if ($this.children("input:checked")) {
        $this.effect("transfer", {
            to: $this.parent().find(":first-child")
        }, 1000);
        $this.remove();
         $(this).prependTo("#mytest");
    }    
});

.ui-effects-transfer {
    border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<ul id="mytest">
    <li><input type="checkbox" id="check1" /><label for="check1">One</label></li>
    <li><input type="checkbox" id="check2" /><label for="check2">Two</label></li>
    <li><input type="checkbox" id="check3" /><label for="check3">Three</label></li>
    <li><input type="checkbox" id="check4" /><label for="check4">Four</label></li>
    <li><input type="checkbox" id="check5" /><label for="check5">Five</label></li>
    <li><input type="checkbox" id="check6" /><label for="check6">Six</label></li>
    <li><input type="checkbox" id="check7" /><label for="check7">Seven</label></li>
    <li><input type="checkbox" id="check8" /><label for="check8">Eight</label></li>
    <li><input type="checkbox" id="check9" /><label for="check9">Nine</label></li>
    <li><input type="checkbox" id="check10" /><label for="check10">Ten</label></li>
</ul>

Demo here: http://jsfiddle.net/naveen/gLBjt/

Disclaimer: This is essentially a port of @redsquare solution. :)