1

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.

5
  • It is not making the fade transitions. It looks like any other pageload.
    – Jens Kvist
    Feb 12, 2016 at 11:20
  • the ajax load function needs the first parameter the link of the loaded html 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
    Feb 12, 2016 at 11:21
  • you need to place the redirecting line in the complete function of fadeOut Feb 12, 2016 at 11:23
  • 2
    Duplicated question. see stackoverflow.com/questions/17891603/jquery-fade-in-page-load
    – Ganov13
    Feb 12, 2016 at 11:26

4 Answers 4

3

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; 
        });
    });
 });
0
3

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

$(document).ready(function() {
    $('body').hide().fadeIn(200);
});
1
  • 1
    To prevent initial flickering due to hide() triggered on DOM ready the CSS display:none might be a better solution. Feb 14, 2016 at 17:46
3

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.

1
  • Thanks for this. Is there a non-Jquery version of this code, and what would the equivalent be on the destination page to fade it in?
    – Khom Nazid
    Sep 13, 2019 at 22:29
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.