javascript - 删除元素时动画列表项？

Question

我已经实现了一个滚动列表，它通过删除顶部元素并将其附加到底部来工作。这给了它无限滚动的效果。问题是，通过删除 < li >，所有元素都会以一种不稳定的方式向上移动(明确地说，我确实希望它们向上移动，但我希望它是平滑的)。

有什么方法可以让 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);
}

这是显示当前行为的 JS Fiddle 链接: http://jsfiddle.net/gak7u1r8/

Answer 1

这个怎么样？

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