Ajax jQuery Fade in of php content

问题:

Im using a timer to call an ajax function that loads in a response from a seperate php page. I want to make it so the content fades out then fades in with the response ever so often.

Here's my code - i can grab the content and make it change just the fading in part im at a loss with.

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

I have tried to do it with .fadeIn but with no luck. I have linked in the latest jQuery file as well.

Thanks

GCooper

回答1:

You're going to want to do this:

1. Get new content
2. Fade out old content
3. Swap old content with new content
4. Fade in new content

So you'll want to change your ready state handler to this:

// 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');
});

And I agree Shomz, you should just use JQuery's $.ajax() function too.

回答2:

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

回答3:

Try using jQuery's .ajax method. That way you could apply any jQuery effect just as you get the response (the PHP page you're opening). Should make your work much easier, and your code more readable. Using the old approach is fine if you want to stay with JS and not waste your resources using jQuery, but since you're using jQuery anyway, why not go all the way with it?

One more thing: might seem stupid, but you do have a div with id="refreshRecords" and display set to none, do you?