Question

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 html tag on link click and wait 1 second (for the CSS fadeOut animation), then redirect to the link.

This is an altered version of this jQuery code:

$(document).ready(function() {

  $("a").click(function(event){
    event.preventDefault();
    redirectLink = this.href;
    $("body").fadeOut(1000, redirectToLink);      
  });

  function redirectToLink() {
    window.location = redirectLink;
  }
});

I have customized it, but I believe there’s a problem with .delay(1000, redirectToLink) and it’s not working. I don’t have much knowledge of JS, so I would really appreciate your help.

$(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;
  }
});

Answer 1

.delay() is meant to be used with animations, but you’ve moved the animation to a css transition. I would use setTimeout instead like this:

  $(document).ready(function() {

    $("a").click(function(event){
      event.preventDefault();
      redirectLink = this.href;
      $("html").addClass('wf-next').removeClass('wf-active wf-inactive wf-loading');
      setTimeout(function(){
        redirectToLink(redirectLink);
      }, 1000);
    });

    function redirectToLink(url) {
      window.location = url;
    }
  });