Question

我已经实现了一个滚动列表，它通过删除顶部元素并将其附加到底部来实现。这使它具有无限滚动的效果。问题是通过删除＆lt; li＆gt;，所有元素都以一种生涩的方式向上移动（要清楚，我确实希望它们向上移动，但我希望它能够顺利）。

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

Answer 2

您可以使用回调在slideUp()之后执行某些操作：

setInterval(scrollList, 1000);

function scrollList () {
  var top = $('li').first();
  $('li').first().slideUp(400, function() {
    $('ul').append(top);
    top.show();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

Answer 3

我会在此处为顶部位置（linear或swing设置动画效果： http://jsfiddle.net/gak7u1r8/3/

<强> 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;
}

<强> JS

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

删除元素时动画列表项？

3 个答案: