在鏈接點擊上添加到<html>的類並添加延遲重定向（淡出頁面）

我試圖添加頁面轉換。淡入轉換是使用WebFont加載器和CSS動畫完成的。我想要的是在鏈接點擊時向html標記添加一個類並等待1秒（對於CSS fadeOut動畫），然後重定向到鏈接。在鏈接點擊上添加到<html>的類並添加延遲重定向（淡出頁面）

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

來源

2012-07-06 reitermarkus

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

來源

2012-07-06 17:13:24

是的延遲只是延遲使用settimeout更好在這種情況下 – 2012-07-06 17:14:13

謝謝，我現在工作。 – reitermarkus 2012-07-06 17:56:33

試試這個：

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

來源

2012-07-06 17:07:59

也無法正常工作，鏈接被立即重新定向點擊。看一看：http://reitermark.us/lab/loading/index.html （點擊底部的重新加載鏈接） – reitermarkus 2012-07-06 17:12:56

嘗試使用fadeIn而不是延遲，請參閱我的編輯。 – 2012-07-06 17:16:32

這可能會起作用，但使用JS fadeIn來獲得CSS fadeOut無法奏效。 – reitermarkus 2012-07-06 18:31:48

在鏈接點擊上添加到<html>的類並添加延遲重定向（淡出頁面）

回答

相關問題