Solved

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

Posted on 2010-08-26
5
1,193 Views
Last Modified: 2012-08-13
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.
0
Comment
Question by:birwin
  • 3
  • 2
5 Comments
 
LVL 40

Accepted Solution

by:
Richard Quadling earned 500 total points
ID: 33540942

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
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 33540991
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 33541133
0
 
LVL 6

Author Comment

by:birwin
ID: 33561180
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
 
LVL 6

Author Closing Comment

by:birwin
ID: 33818661
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

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime is disastrous for companies and can lead to major hits on a brand, reputation, an…
This video teaches users how to migrate an existing Wordpress website to a new domain.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question