javascript - Ajax 替换内容并使用淡入淡出

Question

我正在尝试将带有“demo”作为id的div替换为“newpage.html”的内容。这段代码有效，尽管我只是想知道如何在其中添加淡入淡出效果。

<button onclick="loadDoc()">Click here</button>     

function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          document.getElementById("demo").innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("GET", "newpage.html", true);
      xhttp.send();
    }

Answer 1

删除

document.getElementById("demo").innerHTML = xhttp.responseText;

改为添加此代码

还将“content”更改为“xhttp.responseText”

$('#demo').fadeOut('slow', function() {
    $('#demo').html(content);
    $('#demo').fadeIn('slow');
}); 

最后你必须添加jquery库来执行'FadeIn'

Jquery 库链接 Jquery

您必须将以下代码添加到 html header 部分。

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>