Question

I have a “login” button with a “click” function that redirects the user to another page.

But the thing is that after the user clicks on the “login” button a “fade” animation should take place, before the user is redirected to other page, and that is not happening, i.e. the user cant see the animation since he/she is redirected immediately to the other page and this doesn’t look good =(

How can I fix this?

Thank you!

Answer 1

Use a normal button instead of submit for your login button. When clicked, you call the fading function and on the callback function, you submit the form. 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.