使表格行在可排序UI中设置向上移动的动画

我使用可排序的jQuery UI允许用户拖放表行。这允许用户根据自己的喜好对表格中的项目进行排序。一旦用户完成了列表的排序,他们就会按下一个保存按钮,执行一个Ajax调用。新的排名将保存到数据库中,表格将短暂高亮显示。

我现在添加了一个额外的按钮,可以直接将项目发送到列表的顶部。它也是ajax。它工作得非常好,除了我想添加一个过渡效果 <tr> 将脱离并将其自身拖到桌子顶部,并向下推动以下行。这可能吗?以下是我使用的代码:

此代码处理从“拖放”功能保存对数据库的更改的调用:

<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);
            } 
        });
}

下面的代码是我添加的新“send item to top”按钮。这是我希望过渡的时候:

<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;">