javascript - 创建 DOM 元素后平滑向上/向下滑动

Question

我在 $(db) 中有大量的 xml 数据。单击某个元素时，一个函数会遍历 $(db) 并在隐藏的 div 中创建新的 DOM 元素。我怎样才能顺利滑下div？

$('li').live('click', function(){
    // many $('div.content').append(....
    $('div.content').slideDown();
});

在上面的例子中， div.content 变得可见，但是没有幻灯片效果。如果我不是创建 DOM 元素而是加载具有不同内容的 html 文档，则幻灯片效果可以正常工作。我认为当创建大量新的 DOM 元素时，浏览器会卡住，然后无法执行流畅的动画。我该如何解决这个问题？是否可以在变量中创建所有 DOM 元素，然后像使用 .load() 时那样显示它？

Answer 1

如果您可以从 DOM 中选择新创建的元素，则此方法将很好地工作（需要 jQuery）。您将简单地显示您创建的元素，然后将浏览器滚动到视图中。

function scrollTo(element){
    $("html, body").animate({
         scrollTop: $(element).position().top
    });
}