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显示新项目，这不是我想要的 - 我希望它好像新项目出现在＆＃34;测试列表＆＃34后面;标题，然后整个列表向下滑动以显示它。

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

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/

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

1 个答案: