Run the Click function after an Effect

Question

Hi,

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

You can use setTimeout to trigger the redirect after enough time has elapsed for your click function to finish:

setTimeout("yourRedirectFunction()", 2000);

The above will execute yourRedirectFunction() after 2 seconds. You would place the above bit of code just after the code that causes your fadeout.

Answer 2

You can put the redirection in the callback of your fade effect. Something like this:

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

Answer 3

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.