Question

我有一个“登录”按钮，带有“点击”功能，可将用户重定向到另一个页面。

但事实是，在用户点击“登录”按钮后，应该发生“淡入淡出”动画，然后用户被重定向到其他页面，而这种情况不会发生，即用户无法看到动画，因为他/她被立即重定向到另一页，这看起来不太好=（

我该如何解决这个问题？

谢谢！

Answer 1

您可以将重定向放入淡入淡出效果的回调中。像这样：

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

Answer 2

使用普通button代替submit作为登录按钮。单击时，您将调用淡入淡出函数，并在回调函数上提交表单。 E.g。

<强>的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 3

在点击功能完成足够的时间后，您可以使用setTimeout触发重定向：

setTimeout("yourRedirectFunction()", 2000);

以上将在2秒后执行yourRedirectFunction()。您可以在导致淡出的代码之后放置上面的代码。

在效果后运行Click功能

3 个答案: