Question

i have this bit of nasty code 😛 that updates a div using AJAX, but i would love to see a fadein effect on it. The thing is, i have an image that loads and appears during the interval where the div is not showing any content yet. Analyse the bottom of it. What can i do to make it fadein?

function testing(str)
{
var xmlhttp;
if (str=="")
  {
  document.getElementById("myDiv").innerHTML="";
  return;
  }
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("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
$('#myDiv').html('<div style="text-align:center; padding-top:195px;"><img src="../images/loaderajax.gif" width="220" height="19" /></div>');
xmlhttp.open("GET","getuser.php?q="+str,true);
$('#myDiv').hide();
xmlhttp.send();
$('#myDiv').fadeIn();
}

Answer 1

If you are okay with wrapping the returned content, I would do something like this in the ajax response:

$("<div/>").html(xmlhttp.responseText).appendTo("#myDiv").hide().fadeIn();

This will allow your image to show and only fade in the new content.