MYSQL列每5秒选择并附加一个像文本流一样的div

Question

I'm trying to accomplish an effect of a smooth river like flow of text that is inserted in to the MySQL backend.

Let me explain a bit more with some code.

MySQL Table_Logs

id | logs  
1  | Testing 1  
2  | Testing 2  
3  | Testing 3  
4  | Testing 4  
5  | Testing 5
6  | Testing 6    

What I'm trying to accomplish is to have a jquery function as shown below query this Table_logs every 5 seconds and display any new log it has. The logs should only show the last 5 records from the newest being at the top and the bottom fading out as a new one is appended on top.

I learned that I need to start my Javascript with something similar to below

window.setInterval(function(){
   $.get('/update.php' function(data){
   var output = '<span class="logs_style">'+data+'</span>'
   $("#logs").append(output );
   }, 'html');
}, 5000);

What I would like the output to look like in HTML is as follows

<div id="logs">
   <span class="logs_style">Testing 6</span>
   <span class="logs_style">Testing 5</span>
   <span class="logs_style">Testing 4</span>
   <span class="logs_style">Testing 3</span>
   <span class="logs_style">Testing 2</span>
</div>

Can anyone assist me on how I can go about this? Thank you for reading and any help would be greatly appreciated.

Answer 1

You could fade out the last item and fade in the new one

window.setInterval(function(){
$.get('/update.php' function(data){
var $output = $('<span class="logs_style" style="display:none">'+data+'</span>');
$("#logs").append($output);
$("#logs").last().fadeOut(function(){
    $output.fadeIn();
});
}, 'html');
}, 5000);