使用fadeIn（）和fadeOut（）来设置AJAX响应的动画

Question

使用ajax GET从php文件中获取结果（它只是一个小数），我想淡出旧的结果并淡入新的结果。

这是我目前尝试这样做的方法，但问题是它会每隔30秒淡出和淡出，而不是在数据发生变化时。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  function update() {
    $.ajax({
    type: "GET",
    url: "balancefetch.php",             
    dataType: "html",            
    success: function(response){                    
        $("#response1").html(response); 
    }
 });
}
    setInterval(update, 30000);
    update();
    setInterval(fadein, 30000);
 $("#response1").fadeIn();
    setInterval(fadeout, 30000);
 $("#response1").fadeOut();
});

Answer 1

您应该将成功回调更改为

success: function(response){    
  if ($("#response1").html() != response) {
    $("#response1").fadeOut(200, function() {
      $("#response1").html(response); 
      $("#response1").fadeIn();
    });
  }
}

并且只是

setInterval(update, 30000);
update();