php - MYSQL 列选择并附加到 div，每 5 秒有类似河流的文本流

Question

我正在尝试实现像插入到 MySQL 后端的文本流一样的平滑河流的效果。

让我用一些代码来解释一下。

MySQL Table_Logs

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

我想要完成的是有一个如下所示的 jquery 函数，每 5 秒查询一次这个 Table_logs 并显示它拥有的任何新日志。日志应该只显示最新的最后 5 条记录在顶部和底部淡出作为新的附加在顶部。

我了解到我需要使用类似于下面的内容来启动我的 Javascript

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

我希望输出在 HTML 中的样子如下

<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>

谁能帮助我解决这个问题？感谢您的阅读，任何帮助将不胜感激。

Answer 1

您可以淡出最后一个项目并淡入新项目

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);