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.

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.

• javascript
• jquery
• hyperlink
• transition
• fade

• It is not making the fade transitions. It looks like any other pageload. – Jens Kvist Commented Feb 12, 2016 at 11:20
• the ajax load function needs the first parameter the link of the loaded html – madalinivascu Commented Feb 12, 2016 at 11:21
• you could maybe do this : - $("body").fadeOut(200); the current page, -then window.location.replace($link); with a page that body's Css is display:none - and finally in the new page loadeed script, when onload / docment.ready $("body").fadeIn(200); ... but honestly, i find that approach a little dirty. – Ganov13 Commented Feb 12, 2016 at 11:21
• you need to place the redirecting line in the plete function of fadeOut – madalinivascu Commented Feb 12, 2016 at 11:23
• 2 Duplicated question. see stackoverflow./questions/17891603/jquery-fade-in-page-load – Ganov13 Commented Feb 12, 2016 at 11:26

4 Answers 4

First hide the body of the page on page load then you need to place the redirecting line in the plete 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; 
        });
    });
 });

You need to hide the element initially, either with .hide() or with CSS display:none;.

$(document).ready(function() {
    $('body').hide().fadeIn(200);
});

You have to use setTimeout to time the window.location.replace() to execute after the current body has faded like :

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

Remember to return false at then end of the function else the default action of the link click i.e. redirection precedes any other action associated with the anchor.

But, sincerely, this will give you a smooth fading effect from the current page but not a smooth effect on the redirected page unless it's implemented by you.

This is four years later, but just in case someone needs it. I agree with Roko about the flickering, so I initially hid the body with CSS instead of putting .hide() before the fade in effect:

body {
    display: none;
}

Also some have mentioned using .fadeOut(), but it doesn't work on Chrome. I switched to .show() and .hide() which seems to work great. It also animates all of the elements as it fades, which produces a need transition without a hefty jQuery plugin.

$(document).ready(function() {
    $('body').show(500);
    $("a").click(function() {
        $link = $(this).attr("href");
        setTimeout(function(){
            window.location.replace($link);
        },1000);
        $("body").hide(500);
        return false;
    });
 });

Lastly, I'm using this on a page that contains click-to-scroll navigation like most one-pagers, as well as opening new tabs with target="_blank", so I changed $("a") to $(".transition-link") and added class="transition-link" to the links I want to navigate from.