jQuery 可排序。点击动画排序

Question

我有一个可排序列表，通过单击特定按钮，li 元素在列表中向上或向下移动。我已经做到了这一点，但我需要它随着动画的上升或下降。我想我的方法不太适合完成这个任务。

代码如下:

$(function() {
    $( "#sortablemain" ).sortable({
	axis: "y",
    opacity: 1,
    scrollSpeed: 0,
    scroll: true,
    scrollSensitivity: 1000,
    helper: 'clone',
	tolerance: 'pointer',
	sort: function() {
		return false;
	}
    }).disableSelection().on("click",".uk-icon-arrows-v", function() {
        li = $(this).closest("li");
	if ($(this).attr("id") == "up"){
	    var liPrev = li.prev();
		if (liPrev.length != 0){
		    var liTMP = $('<div>').append($(li).clone()).html();
		    li.detach();
		    liPrev.before(liTMP);
		}
	} else {
	    liNext = li.next();
	    if (liNext.length != 0) {
                var liTMP = $('<div>').append($(li).clone()).html();
		li.detach();
		liNext.after(liTMP);
	    }
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

更新:HTML 有点庞大。如果您愿意，可以在这里看到:http://wdgroup.eu/newves/ 。向下滚动一点到彩色选项卡，它们是我想要动画的 li

Answer 1

您当前正在使用detach()，它在移除元素时不会添加动画。你当然可以使用slideup和 slidedown相反，用于切换元素的可见性。

或者您只需执行 slideup(200).detach() 即可获得动画。

如果你想自定义过渡，你可以随时使用像 TRANSIT.JS 这样的库。 ，它重写了 jquery 中如何完成转换。