為專案列表項新增上下移動動畫。首先想使用jquery animate來做到這一點。
但我用的是table和tr作為列表和列表項，但jquery動畫方法不支援table裡的tr（Animations are not supported on table rows.）。
所以設法用其他解決方案。最後使用jq方法配合 CSS3 transform 實現。

/**
 * @param  {Object} $fstElem 目標行
 * @param  {Object} $scdElem 被換行
 * @param  {Number} dirflag 移動方向 flag, 2 是上移, 1 是下移.
 * @param  {Function} cb 回撥
 
 
*/
function animatedMove($fstElem, $scdElem, dirflag, cb) {
    var fstdir, scddir;
    // move up
    if (dirflag == 2) {
        fstdir = '-';
        scddir = '';
    } else if(dirflag == 1){
    // move down
        fstdir = '';
        scddir = '-';
    }
    // add animations
    $fstElem.css({
        transform: 
 
'translateY('+fstdir+$scdElem.height()+'px)',
        transition: 'transform 0.4s'
    })
    $scdElem.css({
        transform: 'translateY('+scddir+$fstElem.height()+'px)',
        transition: 'transform 0.4s'
    })
    // 重置css3樣式; 觸發回撥函式
    setTimeout(function(){
        $fstElem.css({
            transform: 
 
'none',
            transition: 'unset'
        })
        $scdElem.css({
            transform: 'none',
            transition: 'unset'
        })
        if (dirflag == 2) {
            $fstElem.after($scdElem)
        } else if(dirflag == 1){
            $fstElem.before($scdElem)
        }
        cb && cb()
    }, 400)
}

jsfiddle: DEMO