jQuery append (or appendTo) with Animation

jQuery append (or appendTo) with Animation

本文关键字：with Animation appendTo or append jQuery      更新时间：2023-09-26

我有一个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之后。

我怎样才能做到这一点？

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/

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

当您下降时，我试图实现更平滑的转换，下面是我的版本。。

你需要试用这个演示来了解它是如何工作的。。从下拉列表中选择值，然后单击"降序"以查看动画。

演示

编辑：更新$from在addClass('active')之前的顶部位置，从确切位置开始，而不是顶部：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()});
});
相关文章：