将项目添加到列表顶部并向下滚动

Question

我觉得这应该很简单，但我不知道该怎么做。

我想将新项目添加到列表顶部，并让列表向下滚动以显示新项目。

到目前为止，我最接近的是：http://jsfiddle.net/philgyford/cmsh0zoz/4/ 这会创建并添加一个新的列表项：

var content = 'Hello';
if (Math.random() < 0.3) {
    content += '<br/>Another line';
};

$('<li>').html(content)
            .hide()
            .prependTo( $('ul') )
            .slideDown('slow', function() {
                // Remove final element:
                $('ul').find('li:gt(9)').remove();
            });

通过 slideDown 显示新项目，这不是我想要的 - 我希望新项目出现在“测试列表”标题后面，然后整个列表滑动下来揭示它。

请注意，列表项具有不同的高度，这会使事情稍微复杂化。

Answer 1

不使用slideDown，而是考虑为ul 的上边距设置动画，从新添加元素的负高度开始（包括内边距）。

首先，将此添加到您的 h1 样式中：

position: relative;

这实际上将h1' 置于ul 之上。 （请参阅css positioning z-index negative margins 了解为什么我们不能为此使用 z-index。）

然后您可以像这样为ul 设置动画：

function scroll() {
  var content = 'Hello';
  if (Math.random() < 0.3) {
    content += '<br/>Another line';
  };
  $('ul').prepend('<li>'+content)
         .css('margin-top',-$('li').first().outerHeight(true))
         .delay(1000)
         .animate({'margin-top':0},
                  function() {
                    $(this).find('li:gt(9)').remove();
                    scroll();
                  }
                 );
};

在动画完成后调用scroll 函数可能比使用setInterval 更好，因为它保证在上一次滚动之前不会发生滚动。 delay 阻止它连续运行。

拨弄：http://jsfiddle.net/w0gnzqx6/8/