Question

我有一些讨厌的代码：P使用AJAX更新div，但我希望看到它的fadein效果。问题是，我有一个图像加载并显示在div没有显示任何内容的间隔期间。分析它的底部。我能做些什么让它变得褪色？

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

如果你可以包装返回的内容，我会在ajax响应中做这样的事情：

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

这将允许您的图像显示并且仅淡入新内容。

Answer 2

您的代码是古怪的，并且与您的ajax调用无关。你正在使用JQuery，所以利用它！：）

$.ajax({
   url: 'getuser.php',
   data: str,
   beforeSend(jqXHR, settings) {
        $('#myDiv').html('<div style="text-align:center; padding-top:195px;"><img src="../images/loaderajax.gif" width="220" height="19" /></div>');
    },
    error:function(jqXHR, textStatus, errorThrown) {
        $('#myDiv').html(textStatus + ' -- ' + errorThrown);
    },
    success:function(data){
        $('#myDiv').hide().html(data).fadeIn();
    }
 });

Answer 3

将fadein（）调用放在处理响应的代码中。

您为选择器和效果而不是AJAX使用jQuery的原因是什么？

在AJAX拉后，FadeIn DIV

3 个答案: