jQuery使用Animation追加（或appendTo）

Question

我有一个UL-LI例如

<ul>
    <li id="1">item-1</li>
    <li id="2">item-2</li>
    <li id="3">item-3</li>
    <li id="4">item-4</li>
</ul>

我想将其中一个项目移到列表中的另一个位置。 例如，项目2到项目-4之后。

通常我可以通过删除项目然后将其追加到另一个项目来完成此操作。

但我想通过动画在视觉上实现这一点。 如同，第2项下降到第4项之后。

我怎样才能做到这一点？

Answer 1

ID不应以数字开头......

$('#two').slideUp(500, function () {
    $('#four').after(this);
    $(this).slideDown(500);
});

这是一个演示： http ： //jsfiddle.net/jasper/8JFBA/

或者，如果您总是想要将元素添加到结尾：

$('#two').slideUp(500, function () {
    $('ul').append(this);
    $(this).slideDown(500);
});

这是一个演示： http ： //jsfiddle.net/jasper/8JFBA/1/

更新

好的，所以如果你想让元素滑到它的新位置，你可以去：

//absolutely position the element and give it a top property so it doesn't go to the top of the container
$('#two').css({ position : 'absolute', top : $('#two').position().top });

//now get the offset to the bottom of the list by getting the top offset and height for the last list-item
var lastOffset = ($(this).children().last().position().top + $(this).children().last().height());

//now animate the element to the new position
$('#two').animate({ top : lastOffset }, 1000, function () {

    //when the animation is done, re-add the element to the new position in the list and reset it's position and top values
    $(this).appendTo('ul').css({ position : 'relative', top : 0 });
});

和一个演示： http ： //jsfiddle.net/jasper/8JFBA/3/

更新

您不仅可以将要移动的元素设置为列表末尾的动画，还可以在列表项向上移动时为其余项设置动画：

var $LIs     = $('ul').children(),
    liHeight = 20;
$LIs.on('click', function () {

    var index      = ($(this).index()),
        $LIsAfter  = $LIs.filter(':gt(' + index + ')');

    console.log(index);

    $(this).css({ position : 'absolute', top : $(this).position().top });

    $.each($LIsAfter, function (i) {
        $(this).css({ position : 'absolute', top : ((i + index + 1) * liHeight) });
    });

    $(this).stop(true, true).animate({ top : (($LIs.length - 1) * liHeight)}, 1000, function () {
        $(this).appendTo('ul').css({ position : 'relative', top : 0 });
    });

    $.each($LIsAfter, function (i) {
        $(this).stop(true, true).animate({ top : ((index + i) * liHeight) }, 1000, function () {
            $(this).css({ position : 'relative', top : 0 });
        });
    });
});

这是一个演示： http ： //jsfiddle.net/jasper/8JFBA/8/

这还不完全，还有一两个错误，但它应该有助于让任何人开始这个想法。

Answer 2

当你下降时，我尝试实现更平滑的过渡，下面是我的版本。

您需要尝试演示以了解它是如何工作的。从下拉列表中选择值并点击Descend以查看动画。

DEMO

编辑：在addClass('active')之前更新$from顶部位置，从精确位置开始而不是顶部：0px。 感谢Jasper找到了这个问题。

var $from = $('#from');
var $to = $('#to');

$('button').click (function () {
   var from = $from.val();
   var to = $to.val();

   var $li = $('ul li');
   var $fromEl = $('#' + from);
   var $toEl =  $('#' + to);

    //only descending    
   if (from == to || $li.index($fromEl) > $li.index($toEl)) return;

   var destX = $toEl.position().top;

   $toEl.after('<li id="tmpLi2"></li>');

   $('#tmpLi2').animate({height: $fromEl.outerHeight()}, 1000);

     //add a blank li for smooth animation
     $fromEl
         .after('<li id="tmpLi1">&nbsp;</li>')
         .css ('top', $fromEl.position().top)
         .addClass ('active' )
         .animate({
                top: (destX)
             },
             1000,
             function() {
                $toEl.after(this);
                $('#tmpLi2').remove();
                $(this).removeClass('active');
          });

    $('#tmpLi1').slideUp(function() { $(this).remove()});

});