Javascript 是否在删除元素时设置列表项的动画？

我已经实现了一个滚动列表，它通过删除顶部元素并将其附加到底部来工作。这使它具有无限滚动的效果。问题是，通过移除

，所有元素都会以一种不平稳的方式向上移动（说得清楚，我确实希望它们向上移动，但我希望它是平滑的）

是否有任何方法可以在DOM中设置此更改的动画，以使项目滑入其新位置，而不是猛然进入其位置？下面是一些代码，展示了它当前是如何实现的：

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

// Called every few seconds
function scrollList () {
  var top = $('li').first();
  $('li').first().remove();
  $('ul').append(top);
}

一个
两个
三
四

//每隔几秒钟打一次电话
函数滚动列表（）{
var top=$（'li'）.first（）；
$（'li'）.first（）.remove（）；
$（'ul'）。追加（顶部）；
}

以下是显示当前行为的JS Fiddle链接： 这个怎么样

setInterval(function () {
  var top = $('li').first();
    top.hide(200, function() {
      top.remove();
      $('ul').append(top);
      top.show(200);
    });
}, 2000);

---

您可以在以下情况下使用回调进行操作：

setInterval（滚动列表，1000）；
函数滚动列表（）{
var top=$（'li'）.first（）；
$（'li'）.first（）.slideUp（400，函数（）{
$（'ul'）。追加（顶部）；
top.show（）；
});
}

一个
两个
三
四

我会设置顶部位置（

线性

或

摆动

）的动画，如下所示：

CSS

div {
    position: relative;
    height: 75px;
    overflow: hidden;
    margin: 1em;
    background: none #efefef;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    left: 0;
    top: 0;
}
li {
    line-height: 25px;
    height: 25px;
    overflow: hidden;
}

function scrollList () {
    setTimeout(function() {
        $('ul').animate({top: -25}, 500, 'swing', function() {
            $('ul').css({'top': '0'}).append( $('li').first() );
            scrollList();
        });
    }, 2000);
};
scrollList();

JS

div {
    position: relative;
    height: 75px;
    overflow: hidden;
    margin: 1em;
    background: none #efefef;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    left: 0;
    top: 0;
}
li {
    line-height: 25px;
    height: 25px;
    overflow: hidden;
}

function scrollList () {
    setTimeout(function() {
        $('ul').animate({top: -25}, 500, 'swing', function() {
            $('ul').css({'top': '0'}).append( $('li').first() );
            scrollList();
        });
    }, 2000);
};
scrollList();

---

这起作用出人意料地好。我实际上知道这一点，但假设它会等到动画完成后，再跳转其他元素。它们很好地滑到位了。谢谢