birwin
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
For a prototype solution : https://www.experts-exchange.com/questions/23171588/Fade-in-image-on-page-load-using-scriptaculous-prototype.html#20922292 (Hielo's answer).
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.
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.
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.
Thanks for the code.