title: Add class to <html> on link click and add delay Redirection (fade out page)
body: <p>I'm trying to add page transitions. The fadeIn transition is done using the WebFont Loader and CSS animations. What I want is to add a class to the <code>html</code> tag on link click and wait 1 second (for the CSS fadeOut animation), then redirect to the link.</p>
  
  <p>This is an altered version of <a href="http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/" rel="nofollow">this jQuery code</a>:</p>
  
  <pre><code>$(document).ready(function() {
  
    $("a").click(function(event){
      event.preventDefault();
      redirectLink = this.href;
      $("body").fadeOut(1000, redirectToLink);      
    });
  
    function redirectToLink() {
      window.location = redirectLink;
    }
  });
  </code></pre>
  
  <p>I have customized it, but I believe there's a problem with <code>.delay(1000, redirectToLink)</code> and it's not working. I don't have much knowledge of JS, so I would really appreciate your help.</p>
  
  <pre><code>$(document).ready(function() {
  
  
    $("a").click(function(event){
      event.preventDefault();
      redirectLink = this.href;
      $("html").addClass('wf-next').removeClass('wf-active wf-inactive wf-loading').delay(1000, redirectToLink);      
    });
  
    function redirectToLink() {
      window.location = redirectLink;
    }
  });
  </code></pre>