如何创建向上滑动的消息

Question

如何创建向上滑动的消息，如example？

当您创建一条新消息时，旧消息会向上滑动。我尝试使用幻灯片，但它对我不起作用。

那属于那里，之后角落里的按钮关闭的消息 我只是想知道如何让它们滑动，关闭消息

<div id="Message"></div>
   <button id="button">add message</button>

    <script type="text/javascript" >
        $("#button").click(function(){
          $("#Message").append('<div>messages</div>').slideUp('slow');
        });
    </script>

Answer 1

试试这个：

$( "#button" ).click( function () {

    $( "#Message" ).animate({ scrollTop: $( this ).height () }, 1000 );

});

但是这样做只会在您发送消息时将消息向上推送，如果消息框中还有其他通知，例如 user is active notify 怎么办？您需要检查是否对 Message div 进行了任何更改，然后将其向上推。

Answer 2

通常，当您尝试开发在现实世界中已经以某种能力存在的东西时，最好先检查是否已经存在满足您要求的 jQuery 插件或库。

https://jqueryhouse.com/jquery-chat-plugins/

试一试。