jQuery滚动到底部动画速度问题

Question

我只是在玩一个论坛应用程序的前端jQuery方面（我更适合后端 - 这是一个非常小的涉及模板+ js创建的前端世界）。

基本上，对于每个新评论，聊天框容器会自动滚动到底部，向用户显示最新消息。我用来实现这个目的的代码如下：

聊天消息ID位于聊天框内容容器中，两者均为css：

#chat-box {
  overflow: none;
  position: relative;
  width: 100%;
  height: 91vh;
}
#chat-messages {
  overflow: auto;
  position: absolute;
  width: 100%;
  max-height: 91vh;
}

对于这些，我正在应用以下动画：

$('#chat-messages').animate({scrollTop: $(document).height() + $('#chat-messages').height()}, "slow");

触发提交事件时使用的精简版函数是：

function submitChatMessageEvent( event ) {
   console.log($('#btn-chat-input').val());
   $(chatMessageBlock).hide().appendTo("#chat-messages").fadeIn(1000);
   $('#chat-messages').animate({scrollTop: $(document).height() + $('#chat-messages').height()}, 8000);
}

动画也是我想要的 - 也就是说，确保聊天框始终显示聊天框底部的最新聊天。然而 - 对于上面的动画，“慢”方面根本不起作用......？任何有关自动滚动到div底部的溢出提示。

我的想法是我需要创建分隔框 - 但不知何故先隐藏它，然后触发滚动效果，同时淡化新创建的注释......但如果这是正确的方法，我需要一些指针！

Answer 1

似乎与您提供的信息一起正常工作。

持续时间以毫秒为单位;值越高表示动画越慢，而动画越快。可以提供字符串'fast'和'slow'以分别指示200和600毫秒的持续时间。 http://api.jquery.com/show/

var chatMessageBlock = $('#chat-block');

function submitChatMessageEvent( event ) {
    $(chatMessageBlock).hide().appendTo("#chat-messages").fadeIn(200 /* fast */);
    $('#chat-messages').animate({
      scrollTop: $(document).height() + $('#chat-messages').height()
    }, 600 /* 'slow' */);
}

submitChatMessageEvent();

$('#btn-chat-input').on('click',function(e){
  $('#chat-messages')[0].scrollTop = 0;
  submitChatMessageEvent(e);
});

#chat-box {
  overflow: none;
  position: relative;
  width: 100%;
  height: 91vh;
}
#chat-messages {
  overflow: auto;
  position: absolute;
  width: 100%;
  max-height: 91vh;
}
p {
  margin: 1em;
  padding: 1em;
  border-bottom: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="btn-chat-input" value="Send" type="button"/>
<div id="chat-block" style="display:none">
  <p>One chat message</p>
  <p>Lorem ipsum</p>
  <p>My response</p>
  <p>Lorem ipsum</p>
  <p>Another chat message</p>
  <p>Lorem ipsum</p>
  <p>Another chat message</p>
  <p>Lorem ipsum</p>
  <p>One last chat message</p>
</div>
<div id="chat-box">
  <div id="chat-messages"></div>
</div>