Question

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

这是this jQuery code的修改版本：

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

添加类到链接点击并添加延迟重定向（淡出页面）

2 个答案: