javascript - 将类添加到链接单击并添加延迟重定向（淡出页面）

Question

我正在尝试添加页面转换。使用 WebFont 加载器和 CSS 动画完成淡入过渡。我想要的是html在链接单击时向标签添加一个类并等待 1 秒（对于 CSS fadeOut 动画），然后重定向到链接。

这是此 jQuery 代码的修改版本：

$(document).ready(function() {

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

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

我已经对其进行了自定义，但我认为它存在问题.delay(1000, redirectToLink)并且无法正常工作。我对 JS 了解不多，因此非常感谢您的帮助。

$(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() 旨在与动画一起使用，但您已将动画移动到 css 过渡。我会像这样使用 setTimeout ：

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

Answer 2

尝试这个：

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