Making a table row animate upward movement in sortable UI

Question

I'm using Sortable jQuery UI to allow users to drag and drop table rows. This allows users to rank items in a table based on their preference. Once a user has finished ordering his list, they press a save button which executes an Ajax call. The new rank is saved into the database and the table highlights briefly.

I have now added an additional button that will send an item straight to the top of the list. It's also ajax. It works very well except that I would like to add a transition effect where by the <tr> will break away and drag itself to the top of the table, and push the following rows down. Is this possible? Here is the code I'm using:

This code handles the call to save changes to the database from the "drag-and-drop" feature:

<input type="button" value="Save Queue" id="saveButton" class="list-button">

$(document).ready(function(){
    $("#sortable").sortable();
    $("#saveButton").click(persist);
});

// Persist function (save order)
function persist() {
    var data = $("#sortable").sortable('toArray');
        $.ajax({
            traditional: true,
            url: "/gz/index.cfm/membros/rankListByAjax?order="+data, 
            type: "POST", 
            success: function(msg){ 
            $("#sortable tr").effect("highlight", {}, 1000);
            } 
        });
}

The following code is the new "send-item-to-top" button I added. This is when I would like the transition to happen:

<form ...onsubmit="

$.ajax({ 
dataType: 'script', 
type: 'post', 
url: '/gz/index.cfm?controller=membros&amp;action=send-item-to-top&amp;key=1082&amp;format=js&amp;modType=replace',
data: $(this).serialize(), 
success: function(data, textStatus){$(this).attr('disabled','false');}, 
beforeSend: function(XMLHttpRequest){$(this).attr('disabled','true');}}); return false;" text="&uarr;">