jquery - jqueryでfadeInを実行する方法、およびすべてのresulitionsに適合する方法は?

Question

HTML や CSS などについて少し練習しました。ティッカーも少ししました。

このティッカーでは、テキスト ボックスに書き込み、ボタンを押すと、書き込み内容が下に表示されます。好きなだけ書くことができますが、画面には最後の 3 つのメッセージしか表示されません。

すべてのコードはこの jsfiddle にあります。

JavaScript コード:

$(document).ready(function(){

$("#send").click(function(){
    var removed = false;
    var d = new Date();

    var year = d.getFullYear();
    var month = d.getMonth()+1;
    var day = d.getDate();

    var outputDate = ((''+day).length<2 ? '0' : '') + day + '/' +
        ((''+month).length<2 ? '0' : '') + month + '/' +
         year ;

           var outStr = ((''+d.getHours()).length<2 ? '0' : '') + d.getHours() +':'+
        ((''+d.getMinutes()).length<2 ? '0' : '') + d.getMinutes();

    $(".element").animate({
        top:'+=3%'
    } , 400,  function(){
        if(removed == false)
    {
            removed=true;
            $('.third').remove();
            var temp1 = $('.first').html();
            var temp2 = $('.second').html();

            $('.first').remove();

            $('.elements .second').before('<div class="element first">'+
                '<img id="image" src="images/Picture.png">'+
                '<p class="date" >'+ outputDate +'</p>'+
                '<p class="time" >'+ outStr +'</p>'+
                '<p class="output" >'+ $('#input1').val()+
                '<p class="name" >'+ "Nina Pnina"+'</p>'+
                '</div>');

            $('.second').html(temp1);
            $('.elements .second').after('<div class="element third">'+temp2+'</div>');

        }
    $(".element").removeAttr("style");
        //$(".second").css("top","3%");
    });

  });
});

function clearContents(element) {
  element.value = '';
}

今のところ、それは私のPC上でローカルなので、写真はjsfiddleには表示されませんが、それはかなり理解できます.

今はもっとうまくやりたいので、新しいメッセージが送信されると、画面にポップするだけでなく、フェードインします。

私の2番目の問題は、ラップトップで確認したところ、すべてのティッカーが混乱していたことです。解像度が原因だと思います。ティッカーをすべての解像度で動作させる方法を知っている人はいますか?

ありがとう！