Add class to 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;
  }
});

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

回答2:

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

来源：https://stackoverflow.com/questions/11366627/add-class-to-html-on-link-click-and-add-delay-redirection-fade-out-page

标签

javascript