jQuery 中的同步滑动和滚动

Question

我正在开发一个包含 Ajax 聊天的应用程序。新消息会附加到聊天窗口的底部，该窗口下方有一个文本框和按钮，允许用户发送新消息。每个新行都使用 jQuery Slide() 附加在该行内容（在我的例子中是 ap 元素）上的动画内容中。

页面充满消息后，用户必须不断向下滚动才能看到新消息和文本框。我想通过在附加新消息时自动向下滚动来为用户省去麻烦。

我可以在 Slide() 之后使用 animate() 来实现此目的，如下所示：

    newRow.find("p").slideDown();
    $('html, body').animate({
        scrollTop: $('#Bottom').offset().top
    });

它有效，但结果有点不稳定。关于如何使幻灯片和动画协同工作以使整体动画流畅有什么建议吗？

编辑：您可以在 http://jsfiddle.net/tzA4d/1/< 处看到它的工作原理并进行使用。 /a>.等待几秒钟，直到消息到达屏幕底部，您会看到不太平滑的滚动。

Answer 1

您可以在动画“step”回调函数中设置scrollTop

row.find("p").hide(); 
lastRow.before(row); 
row.find("p").animate({"height":"toggle", "padding-top":"toggle","padding-bottom":"toggle"}, 
    { duration: 400,
      step: function(now, fx) {                
               $('html, body') .scrollTop($('#Bottom').offset().top);
            } 
    });