jquery上移下移动画的实现

我爱模板网利用 SortableJS 实现了列表的拖拽排序，但是列表还有上下箭头，点击可以上移下移，这个一开始直接利用jQuery替换，没有动画效果，客户不满意。

这里，简单操作下css，来实现，在上移下移之前执行下动画。

html结构如下：

<div class="ul">
<div class="li">
<h3>标题测试</h3>
<div class="tools">
<i class="la la-lg la-arrows-alt" title="拖拽"></i>
<i class="la la-lg la-arrow-up" title="上移" onclick="movePrev(this, true)"></i>
<i class="la la-lg la-arrow-down" title="下移" onclick="moveNext(this, true, {%=data.length%})"></i>
<i class="la la-lg la-trash" title="删除" onclick="delThis(this, true)"></i>
</div>
</div>
<div class="li">
<h3>标题测试</h3>
<div class="tools">
<i class="la la-lg la-arrows-alt" title="拖拽"></i>
<i class="la la-lg la-arrow-up" title="上移" onclick="movePrev(this, true)"></i>
<i class="la la-lg la-arrow-down" title="下移" onclick="moveNext(this, true, {%=data.length%})"></i>
<i class="la la-lg la-trash" title="删除" onclick="delThis(this, true)"></i>
</div>
</div>
<div class="li">
<h3>标题测试</h3>
<div class="tools">
<i class="la la-lg la-arrows-alt" title="拖拽"></i>
<i class="la la-lg la-arrow-up" title="上移" onclick="movePrev(this, true)"></i>
<i class="la la-lg la-arrow-down" title="下移" onclick="moveNext(this, true, {%=data.length%})"></i>
<i class="la la-lg la-trash" title="删除" onclick="delThis(this, true)"></i>
</div>
</div>
</div>

上移下移方法如下：

function movePrev(el, hasIndex) {
    const item = $(el).parents('.li');
    var prev = item.prev();
    if (prev.length == 0) return;
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function() { 
        prev.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertBefore(prev);
    });
}
function moveNext(el, hasIndex, len) {
    const item = $(el).parents('.li');
    var next = item.next();
    if (next.length == 0) return;
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function() { 
        next.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertAfter(next);
    });
}

利用自身的高度和定位来实现动画效果。