Ajax jQuery淡入php内容 - Ajax jQuery Fade in of php content

Ajax jQuery Fade in of php content

本文关键字：内容 php 淡入 jQuery Ajax | 更新日期: 2023-09-27

我使用计时器来调用一个ajax函数，该函数从一个单独的php页面加载响应。我想让内容淡出，然后随着响应淡出。

这是我的代码-我可以抓取内容，并使它改变只是褪色的部分，我在损失。

<script type="text/javascript">

window.setTimeout('runMoreCode()',100);
$(document).ready(function(){
$('#refreshRecords').fadeIn(2000);
});

function runMoreCode()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
 }
  else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {   
   document.getElementById("refreshRecords").innerHTML=xmlhttp.responseText;
$('#refreshRecords').fadeIn('slow');
    }
     }
 xmlhttp.open("GET","NewRecords.php",true);
xmlhttp.send();
setTimeout("runMoreCode()",6000);
 }

  </script>

我试过用。fadein做这个，但是没有运气。我也链接了最新的jQuery文件。

感谢

GCooper

你要这样做:

获取新内容
淡出旧内容
用新内容替换旧内容
淡入新内容

所以你要把你的就绪状态处理器改成这样:

// fade out old content
$('#refreshRecords').fadeOut('slow', function (){
    // now that it is gone, swap content
    $('#refreshRecords').html(xmlhttp.responseText);
    // now fade it back in
    $('#refreshRecords').fadeIn('slow');
});

我同意Shomz，你也应该使用JQuery的$.ajax()函数

 $.get({
 URL: "NewRecords.php", 
    function(data){
       //add fade in effects
       $('#result').hide().HTML(data).fadeIn('slow');
    }
 });

尝试使用jQuery的.ajax方法。这样，您可以在获得响应(正在打开的PHP页面)时应用任何jQuery效果。应该使您的工作更容易，您的代码更可读。如果您想继续使用JS，而不是使用jQuery浪费您的资源，那么使用旧的方法是可以的，但是既然您要使用jQuery，为什么不一直使用它呢?

还有一件事:可能看起来很愚蠢，但你确实有一个div id="refreshRecords"和显示设置为none，你吗?