title: Problem with fading html pages using JQuery and Ajax
body: <p>As a beginner in coding starting to learn in college, I am trying to complete my first assignment which consist in coding a website on glitch using CSS, HTML and JS (and we have to load data using <code>$.getJSON()</code> ).</p>
  
  <p>The problem i encountered from the get go was that I was trying to create a smooth fade transition between the first html page that loads, on which there is one button that is supposed to lead to the second, and the second html page. I tried following this tutorial:</p>
  
  <p><a href="https://www.superhi.com/video/simple-page-transitions-with-jquery-and-javascript" rel="nofollow noreferrer">https://www.superhi.com/video/simple-page-transitions-with-jquery-and-javascript</a> (replacing "section" with "body") but for the second page to load I need to refresh the page, it cannot do it on its own (even if the fade in / fade out effect seems to work) and despite the fact that the url do change... can anyone tell me where I mess up ?</p>
  
  <p>Here is the body of my first html page </p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="content"&gt;
  &lt;h1&gt;&lt;a href="index2.html" id="index2go"&gt;Welcome to Greendale&lt;/a&gt;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt; 
  &lt;/script&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and here is the JS page</p>
  
  <pre><code>$("#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)
  })
  }
  })
  })
  </code></pre>
  
  <p>Thank you very much !</p>