Grow your CSS skills. Land your dream job.

Fade Out between pages

  • # March 4, 2011 at 6:11 am

    Hello… I was curious if anybody knew how to fade out content during a transition to a new page.

    Example Link
    (Click on any of the page links at the top)

    http://www.stylodesign.co.uk/

    Thank You

    # March 4, 2011 at 7:53 am

    That will be javascript.

    1, On click fade the page elements out.
    2, Get JS to redirect to the new page.

    # March 4, 2011 at 8:56 am

    Ok…I am not very strong with JS, Could you possibly help me a bit more please.

    Thank You

    # March 4, 2011 at 10:30 am

    $(“body”).fadeOut();

    That’d be jQuery fading out the page…

    I understand that’s not much info =/ I’ll be releasing a little framework that is very similar to this, only for slides, very soon.

    # March 4, 2011 at 2:38 pm

    See below post…

    # March 4, 2011 at 7:47 pm

    By the way, if you are wanting to fade pages IN as well, you’ll want to set the body’s display:none in the jquery and fadeIn().. Holla


    $(document).ready(function() {
    $('body').css('display', 'none');
    $('body').fadeIn(1000);

    $('.link').click(function() {
    event.preventDefault();
    newLocation = this.href;
    $('body').fadeOut(1000, newpage);
    });
    function newpage() {
    window.location = newLocation;
    }
    });

    What this does is sets the body to not display, then fades it in.

    Then once you click a link which you have deemed worthy of making the page fade out, it first prevents the default, which is instantly going to that link, and sets the variable new Location to be the href attribute of the currently clicked link. Then the body fades out and after the fade out it calls function newpage().

    Try that puppy out.

    Sorry I have a bit too much fun when it comes to js/jquery, I’m still learning myself so it’s a learning experience for both of us!

    # March 5, 2011 at 12:40 am

    Hey Thanks…I will give a try soon and let you know how it pans out…seems to look strong.

    # March 5, 2011 at 12:53 am

    Interesting…for some reason the page loads and then the fade comes in to effect, instead of fading into the next page…

    # October 15, 2012 at 5:28 pm

    Do you have any news or tutorial of how can I have fade in – fade out between web pages?

    # April 8, 2013 at 6:36 pm

    I know this is an old thread but I couldnt help notice the code that was posted… Everything soap posted will work perfectly fine for what youre trying to do, he just forgot to pass the event object.

    The code below should get you the effect you were looking for:


    $(document).ready(function() {
    $('body').css('display', 'none');
    $('body').fadeIn(1000);

    $('.link').click(function(event) {
    event.preventDefault();
    newLocation = this.href;
    $('body').fadeOut(1000, newpage);
    });

    function newpage() {
    window.location = newLocation;
    }
    });

    If you notice, the only difference in the code above and what soap posted was on the line with


    $('.link').click(function() {

    it should have read


    $('.link').click(function(event) {

    Hopefully this helps someone out in the future :)

    # April 18, 2013 at 12:03 pm

    Dear tomscustoms, thanks for the update. I have not been able to get the FadeOut work at all! When a button is clicked, current page immediately disappears (doesn’t fadeout) and the new page nicely fades in. Have you tested above code? is there a way to fix it? Thanks.

    # May 29, 2013 at 12:46 am

    hai guys, how to transitions page using slide effect ? thanks

    # July 4, 2013 at 3:29 am

    Hi bultala,

    I was just playing around with the code and I think I know what you’re looking for to make the page fade out when the link is clicked to go to another page – you just need to add the class=”link” to your “a” tag in the html.

    see where tomscustoms wrote this line of code:

    $(‘.link’).click(function(event)

    it could have been written like this as well:

    $(‘a.link’).click(function(event)

    the “.link” is the class that needs to be added to any “a” tag(s) in your html that you would like to execute the fade out function while leaving the current page.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".