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/。向下滚动到彩色标签，它们就是我想要制作动画的

Answer 1

您目前正在使用detach()，在取消元素时不会添加动画。您可以使用slideup和slidedown代替切换元素的可见性。

或者您可以slideup(200).detach()进行动画制作。

如果你想自定义转换，虽然你总是可以找到像 TRANSIT.JS 这样的库，但它重写了如何在jquery中完成转换。

Answer 2

用css做了吗？向所有选项卡添加了转换规则，并在转移和附加之前单击，然后移动它们

li.css("transform","translate3d(0,-310px,0)");
liPrev.css("transform","translate3d(0,310px,0)");

和

li.css("transform","translate3d(0,310px,0)");
liNext.css("transform","translate3d(0,-310px,0)");

jQuery可排序。点击动画

2 个答案: