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.
LVL 6
birwinAsked:
Who is Participating?
 
Richard QuadlingSenior Software DeveloperCommented:

document.observe
      (
      'dom:loaded',
      function()
            {
            document.body.show();
            
            document.observe
                  (
                  'unload',
                  function()
                        {
                        document.body.fade();
                        }
                  );
            }
      );

You will need to have ...



for this to work, otherwise no fade in.

0
 
Richard QuadlingSenior Software DeveloperCommented:
0
 
Richard QuadlingSenior Software DeveloperCommented:
0
 
birwinAuthor Commented:
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.
 
 
0
 
birwinAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.