使用 JQuery 和 Ajax 淡化 html 页面的问题答案

【问题标题】：Problem with fading html pages using JQuery and Ajax使用 JQuery 和 Ajax 淡化 html 页面的问题
【发布时间】：2018-11-02 20:53:40
【问题描述】：

作为一名开始在大学学习的编码初学者，我正在努力完成我的第一个任务，其中包括使用 CSS、HTML 和 JS 对一个故障网站进行编码（我们必须使用 $.getJSON() 加载数据）。

我从一开始就遇到的问题是，我试图在加载的第一个 html 页面和第二个 html 页面之间创建一个平滑的淡入淡出过渡，在该页面上，有一个按钮应该通向第二个页面.我尝试按照本教程进行操作：

https://www.superhi.com/video/simple-page-transitions-with-jquery-and-javascript（将“section”替换为“body”）但是要加载第二个页面，我需要刷新页面，它不能自行完成（即使淡入/淡出效果似乎有效) 尽管网址确实发生了变化......谁能告诉我我在哪里搞砸了？

这是我的第一个 html 页面的正文

<body>
<div class="content">
<h1><a href="index2.html" id="index2go">Welcome to Greendale</a></h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script src="main.js"></script>
</body>

这里是 JS 页面

$("#index2go").on("click", function(event){
event.preventDefault()
const href = $(this).attr("href")
window.history.pushState(null, null, href)
$.ajax({
url: href,
success : function(data){ 
$("body").fadeOut(300, function(){ 
const newPage = $(data).filter("body").html()
$("body").html(newPage)
$("body").fadeIn(250)
})
}
})
})

非常感谢！

【问题讨论】：

欢迎来到 Stack Overflow！请不要发布代码或错误的图像，因为这会使我们更难帮助您解决问题。最好将相关代码和/或错误直接复制并粘贴到您的问题中。请阅读Why not to upload images of code on SO when asking a question?，然后阅读edit您的问题。
除了上述注释之外，您还可以使用jsfiddle.net 将示例代码加载到其中，以便轻松测试。
在出现故障时，我在同一个项目中创建了 2 个 html 文件，而我在 jsfiddle 上无法做到...
@NonoBNY 我看到的问题的一部分是您正在将新的<html> 标记从被调用页面添加到<body> 标记中。这可能会导致一些问题。您可能还想结帐.load()。此外，当您淡出然后淡入时，在所有项目加载之前，它的执行速度可能比预期的要快。

标签： javascript java jquery ajax fading

【解决方案1】：

我不确定您的项目范围，所以这可能超出了范围。使用 FadeIn 和 FadeOut，您可以在过渡结束时执行该功能。对于 AJAX，情况并不完全相同。这有点复杂，但这意味着即使 AJAX 正在处理请求，也可能在返回数据之前执行进一步的代码。所以最好把所有代码都封装起来。

这是一个建议的例子：

$(function() {
  function getContent(u, target, fn) {
    var newPage;
    console.log("GET " + u);
    var req = $.ajax({
      url: u,
      cache: false,
      dataType: "html",
      success: function(data) {
        console.log("SUCCESS ", data);
        newPage = $(data).find("body").childern();
        target.html(newPage);
        fn();
      },
      error: function(xhr, stat, error) {
        console.log("ERROR ", xhr, stat, error);
        newPage = $("<div>", {
          class: "error"
        }).html("Error " + stat + ": " + error);
        target.html(newPage);
        fn();
      }
    });
  }
  $("a").on("click", function(event) {
    event.preventDefault();
    var href = $(this).attr("href");
    window.history.pushState(null, null, href);
    $("body").fadeOut(300, function() {
      $("body").html("");
      getContent(href, $("body"), function() {
        $("body").fadeIn(250);
      });
    });
  });
});

<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<div class="content">
  <h1><a href="index2.html" id="index2go">Welcome to Greendale</a></h1>
</div>

【讨论】：