Page FadeIn and FadeOut Transition

Question

I am currently trying to create a script that makes fading transition from page to page when clicking a anchorlink. I have already made the script, but it does not seem to work.

My code look like this:

$("body").load(function() {
    $(this).fadeIn(200);
});

$("a").click(function() {
    $link = $(this).attr("href");
    $("body").fadeOut(200);
    window.location.replace($link);
});

It does not seem to make the fadeIn and fadeOut transitions. It is still the normal pageload.

Answer 1

First hide the body of the page on page load then you need to place the redirecting line in the complete function of fadeOut

Try this code:

 $(document).ready(function() {
    $('body').hide().fadeIn(200);
    $("a").click(function(e) {
        e.preventDefault();
        $link = $(this).attr("href");
        $("body").fadeOut(200,function(){
          window.location =  $link; 
        });
    });
 });