Question

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

页面填满消息后，用户不得不向下滚动才能看到新消息和文本框。我希望通过在添加新消息时自动向下滚动来为用户节省麻烦。

我可以在slide（）之后使用animate（）实现这个目的，如下所示：

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

它有效，但结果有点跳跃。关于如何使幻灯片和动画一起工作以使整个动画流畅的任何建议？

编辑：您可以在http://jsfiddle.net/tzA4d/1/看到它正常工作并使用它。等待几秒钟，直到消息到达屏幕底部，您将看到不那么平滑的滚动。

Answer 1

您可以在动画“步骤”回调函数中创建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);
            } 
    });

在jQuery中同时滑动和滚动

1 个答案: