Link to home
Start Free TrialLog in
Avatar of birwin
birwinFlag for Canada

asked on

Cross Browser Page Fade-In on load and Fade-out on click to new page

I need a page to load as solid black, and then fade to reveal the page content.

When a link to another page on the site is clicked, I need the current page to fade out to black. The new page should also load as solid black and fade to reveal the page content.

I have tried a few jQuery snippets, without success.

The solution must work with Firefox, Safari, and IE. Opera would be nice.

I'd appreciate your ideas.
ASKER CERTIFIED SOLUTION
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of birwin

ASKER

I would far prefer to use a jQuery function, but I haven't found one that will work on the full page.
I already have jQuery running on the page. I am using the Dynamic Drive Fade In Slideshow. (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm) and any attempt that I have made to fade the page, either by trying to fade the body tag or a div wrapper, has not been successful. The image fades in, but the menu elements and other elements on the page don't fade, even when enclosed in a div.
 
 
Avatar of birwin

ASKER

This particular page was loaded with other JavaScript and jQuery code, and was never able to get a page transition to work on it, but your code does work on a normal HTML page.

Thanks for the code.