2017-10-29 14 views
-1

このように上向きに移動するスライドメッセージを作成するには、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> 

答えて

0

メッセージを閉じるために、私はそれらをスライドさせる方法を知ることにだけ興味が 後、そこの角にあるボタンと密接のメッセージを所属:

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

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

}); 

しかし、このようにすると、メッセージを送信するときにメッセージをプッシュするだけです。メッセージボックスに他の通知があると、ユーザーはアクティブ通知をしていますか? Message divの変更があったかどうかを確認してから、それをプッシュしてくれるものが必要です。

+0

私はコードを試してみましたが、うまくいきません。この回答に感謝します。 私は、あなたの提案を考慮に入れて、それを動かすメッセージがあるかどうかを検証する必要があると考えています。実装方法はわかりません。ソリューションを見つけるために少し勉強しなければならないようです –

+0

それを試してみてください、スクロールを行うdemostrateするための私の簡単なcodepenはこれまでずっと簡単でした:D [https://codepen.io/ShadowLegend/pen/QOWZRP] – lambda

+0

ありがとう、私はあなたが私にこのアイデアを与えることができると思うどのようにそれを実装するか、 私はコードが良い場合、私は助けを感謝し、より多くの人々が見て、恩恵を受けることができるように、私はそれを公開します。おかげで –

0

現実世界のある程度の容量ですでに存在するものを開発しようとするときは、まず質問するものを実行するjQueryプラグインまたはライブラリが存在するかどうかを確認することをお勧めします。

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

これらの打撃を与えます。

+0

それを行うプラグインがある場合は真実ですが、今私はそのような種類のアニメーションを行う方法を知りたいと思います。それらのプラグインを実装する方法を知らない人がいて、 を難しく、簡単に考えると、ここでコードを見て、どのように動作しているかを見て、他の人が物事の仕組みを学ぶのを助けることができます。この回答に感謝します。 –

関連する問題