CODEWITHSUNDEEP
javascriptjqueryhyperlinktransitionfade
Jens Kvist
Jens Kvist

Reputation: 559

Page FadeIn and FadeOut Transition

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.

Upvotes: 1

Views: 7033

Answers (4)

Michael
Michael

Reputation: 471

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.

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

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

Upvotes: 3

anuvab1911
anuvab1911

Reputation: 321

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.

Upvotes: 3

Filip Grkinic
Filip Grkinic

Reputation: 130

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

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

Upvotes: 3

Related Questions