Question

我有一个填充了外部php文件的div，它循环来自MySQL查询的结果。我希望div使用AJAX每5秒刷新一次，并且只有新的结果在列表的顶部淡入，而其他的只是向下移动，如Twitter和Facebook。

我是AJAX的新手，这就是我现在在文档的主管部分：

<script type="text/javascript">
$(document).ready(function(){
$('#load_tweets').load('inc/searchresults.php');
});
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('inc/searchresults.php').fadeIn(5000);
}, 5000); // refresh every 5 seconds
</script>

现在，内容不会在文档准备就绪时加载，但所有div都会每5秒刷新一次，但它不会淡入。我有三个问题，首先，如何修复我的代码以便div加载页面加载？其次，我怎样才能让它适当淡入？

最后，我将如何仅在新结果中淡出？我认为它会涉及使用主键＆gt;的项目淡入淡出来自之前的AJAX调用的那些，但我不知道该怎么做。

非常感谢您的协助。

Answer 1

因为您异步调用fadeIn函数，它会在加载的同时运行，并且在再次调用之前没有时间完成。而且，你永远不会淡出。试试这个：

<script type="text/javascript">
    $(document).ready(function()
    {
        function update_div()
        {
            $('#load_tweets').fadeOut('normal', function()
            {
                $('#load_tweets').load('inc/searchresults.php');
                $('#load_tweets').fadeIn(5000, function()
                {
                    window.setTimeout("update_div()", 5000);
                });
            });
        }

        update_div();
    });
</script>

Answer 2

诀窍是不再加载所有内容，只需将新内容插入隐藏之上，然后添加淡入淡出。

// Untested, written here without syntax.
var timeSinceUpdate = <?php echo(time()); ?>; //Needs to be system time so that it works correctly
$(document).ready(function(){    
    setInterval(function(){
        $.get('inc/queriesSince.php?searched=something+something&timesinceupdate=' + timeSinceUpdate , function(data){
            alert(data);
            if(confirm('Add new Data to screen?'))
            {
                //Add Stuff to DOM and 
                //update the timeSinceUpdate from the data recieved so that it is system time.
            }
        });
    }, 3000);
});

如何淡化jQuery AJAX autoupdating div的新结果

2 个答案: