CODEWITHSUNDEEP
javascriptjquerytransitionfadecss-transitions
reitermarkus
reitermarkus

Reputation: 708

Add class to <html> on link click and add delay Redirection (fade out page)

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

Upvotes: 2

Views: 2225

Answers (2)

Control Freak
Control Freak

Reputation: 13233

Try this:

  $(document).ready(function() {


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

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

Upvotes: 0

Phil Gran
Phil Gran

Reputation: 148

.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;
    }
  });

Upvotes: 4

Related Questions