How do you make an html page fade out while another fades in?

Question

I have a client with an event planning site asking his pages to fade into one another. I have no idea how I can accomplish this. Any ideas? Is there anyway to do this withou

Answer 1

Here's a hacky way I just thought of. Similar to Alex Lawford's answer, but hopefully a bit better:

On clicking a link, send an AJAX request for the new page, but don't do anything with the response. Once you receive the response, then fade out the current page, issue a standard window.location = <newurl> command and have javascript on that side immediately hide and then fade in the new document.

The hope here is that the response from the AJAX call is cached, so the time between fade out and fade in will be negligible.

I'll just reiterate from the first sentence though: this is hacky.

Answer 2

You could load the content using an AJAX request and then use javascript to fade out one page and fade in the other? In jQuery, something along the lines of:

$.get('newpage.html', {}, function(res){
    $('#content-container').fadeOut().html(res).fadeIn();
});

Not perfect, but it's a move in the right direction hopefully? This isn't really something HTML was made for...

Thanks, Joe

Answer 3

Definitely get hold of a javascript framework. jQuery is popular (because it's ace), but there's Mootools, Prototype, and Dojo to name a few.

I'm not sure if crosssfading can be done reliably across all the browsers without popping / jumping artifacts. Even the example Dancrumb points to is a bit ropey (no insult intended Dan).

Process-wise, you could have 3 layers (top to bottom)

• screen (initially invisible)
• page (one)
• container (initially empty)

when the user tries to navigate to the second page, load it into the container using ajax. Once the page has loaded, start fading up the screen. Once the screen is at 100% opacity, manipulate the DOM to move the loaded content out of the hidden container and into what is now page two, then start fading the screen back out again.

EDIT on a sidenote - I would summon up all my webdev mojo and try to convince the client what I bad idea it is to have complete page fades on an site designed to communicate information. Obviously I know sweet FA about this project so feel free to slap me down; but I've never seen a case where fancy effects and transitions has improved the usability of a site when used at the page level. I know it'd irritate me if I had to wait for a fancy transition to finish before I could continue navigating...