效果後運行點擊功能

Question

我有一個「登錄」按鈕，帶有「點擊」功能，可將用戶重定向到另一頁面。

但事情是，用戶點擊「登錄」按鈕後，應該發生「淡入淡出」的動畫，在用戶被重定向到其他頁面之前，並沒有發生，即用戶不能看到動畫因爲他/她將被立即轉移到其他頁面，這看起來並不好=（

我該如何解決這個問題？

謝謝！

Answer 1

使用正常button，而不是submit您的登錄按鈕。點擊後，您可以調用淡入淡出功能，並在回調函數中提交表單。例如。

jQuery的

$(document).ready(function(){ 
    $("#loginbtn").click(function(){ /* When login is clicked */ 
    $("body").fadeOut(3000,function(){ /* Three second fade out */ 
     $("#myform").submit(); /* Submit the form after the fade out is done */ 
    }); 
    }); 
}); 

HTML

<form id="myform" action="test.html" enctype="multipart/form-data" method="post"> 
    <input type="button" id="loginbtn" value="Login" /> 
</form> 

An example in action.

Answer 2

您可以使用setTimeout後觸發重定向足夠的時間完成您的點擊功能：

setTimeout("yourRedirectFunction()", 2000); 

以上將在2秒後執行yourRedirectFunction()。你可以在引起你的淡出的代碼之後放置上面的代碼。

Answer 3

您可以將重定向放在淡出效果的回調中。事情是這樣的：

$('#yourbutton').click(function(){ 
    $('#something').fadeOut('slow',function(){ 
    location.href='somewhere_else.html'; // waits for animation to complete 
    }); 
});