Question

作为编码的初学者，我开始在大学学习，我试图完成我的第一个任务，其中包括使用CSS，HTML和JS在小故障上编码一个网站（我们必须使用$.getJSON()加载数据）

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

https://www.superhi.com/video/simple-page-transitions-with-jquery-and-javascript（将“ section”替换为“ body”），但要加载第二页，我需要刷新页面，它无法单独执行（即使看起来淡入/淡出效果也是如此）正常工作），尽管url确实发生了变化……任何人都可以告诉我我搞砸了吗？

这是我的第一个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)
})
}
})
})

非常感谢您！

Answer 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>

使用JQuery和Ajax的html页面褪色的问题

1 个答案: