Solved

Fade out and fade then in on page redirect

Posted on 2009-04-13
2
1,387 Views
Last Modified: 2012-05-06
I'm looking to demonstrate a simple fade out and then in transition,
I.e.
1) User is onPage 1 i.e. HTML page with black background.
2) User clicks link to redirect to page2
3) Page 1 fades to white then redirects to page 2
4) Page 2 loads - then fades from white to black
5) User is now on page 2

I've tried to start this i.e. please see below however i dont seem to be able to get the fade out and then in working together. So far i'm doing this using jquery however i'm happy to use a different library if advised and if its cross browser compatible.

Can anyone see - what i'm doing wrong here.

Any working samples would be greatly appreciated

Thanks
P
------------------------
PAGE 1 [test1.htm]
------------------------
<html>
<head>
    <title></title>
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 
    <script type="text/javascript">
        
$(document).ready(function(){
        jQuery('a').click(function(){
        jQuery(document.body).fadeOut(2500);         
        setTimeout("nav('"+this.href+"')",2500);
        return false;
    });
});
 
function nav(href){
 location.href=href;
}
    </script>
 
</head>
<body style="background-color:black">
<!--http://docs.jquery.com/Effects/fadeIn#speedcallback-->
    <a href="test2.htm">test</a>
    BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
    <br />
</body>
</html>
 
------------------------
PAGE 2 [test2.htm]
------------------------
<html>
<head>
    <title></title>
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 
    <script type="text/javascript">
$(document).ready(function(){
        jQuery('a').click(function(){
        //jQuery(document.body).fadeIn(1000);         
        jQuery(document.body).fadeOut(2500);      
        setTimeout("nav('"+this.href+"')",2500);
        return false;
    });
});
 
function nav(href){
 location.href=href;
}
    </script>
 
</head>
<body style="background-color:black">
    <br />
    <a href="test1.htm">test</a>
</body>
</html>

Open in new window

0
Comment
Question by:paulCardiff
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 14

Accepted Solution

by:
ziffgone earned 500 total points
ID: 24131489
OK, the tricky thing is, when you set the body background color to black, even if you fade the body element, the background does not fade to white, it stays black. The work-around is to use the jQuery Effects Core javascript which extends the animate function to include background colors.

So, I had to wrap the content in a div so I could fade it while at the same time animate the body background color to go from black to white and vice-versa. If I tried to fade the body at the same time as animate the color, it resulted in the same problem of the body content fading out but the background color stayed black.

This is what I have for you:
http://webmastereseller.com/test/fadeout_page1.htm

Code:
// Page 1 HTML:
 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link rev="made" href="mailto:" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="generator" content="NoteTab Pro 5.5" />
  <meta name="author" content="Perry Wolf" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
        $('a').click(function(){
           var loc=$(this).attr('href');
           $('#fadeDiv').fadeOut(2500);
           $('body').animate(
               {backgroundColor:'#FFFFFF'},
               2500,
               function(){
                    nav(loc);
               }
           );
           return false;  
        });
});
function nav(loc){
 top.location.href=loc;
}
</script>
</head>
<body style="background:#000000;color:#FFFFFF;">
<div id="fadeDiv" style="padding:20px;">
<h1 style="text-align:center;">Page 1</h1>
    <a href="fadein_page2.htm">test</a><br /><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit urna. Nunc tincidunt sem at diam. Morbi vitae ligula. Mauris magna metus, gravida vel, condimentum gravida, posuere a, dui. Fusce tristique aliquam sapien. Duis sit amet felis a libero ullamcorper facilisis. Nulla ullamcorper leo. Nam molestie rhoncus ipsum. Nunc malesuada felis et nibh. Proin odio libero, elementum interdum, congue non, euismod aliquet, tellus. Aenean tempus aliquet quam. Duis lorem sapien, tempor id, cursus eu, ultrices at, lacus. Donec quis dolor in tortor volutpat consequat. Pellentesque viverra sollicitudin turpis. Vivamus sodales, elit ac placerat elementum, dui tortor adipiscing purus, vel suscipit felis lacus non nibh.</p>
 
<p>Morbi tincidunt magna vitae velit. Maecenas iaculis. Suspendisse sagittis velit eu odio vulputate vehicula. Nunc eu felis eget enim imperdiet dignissim. Nulla nisi. Nunc bibendum, magna vel dapibus feugiat, magna augue condimentum neque, quis tempus purus libero non augue. Duis viverra pretium metus. In hac habitasse platea dictumst. Proin luctus diam nec urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed felis. Integer porttitor accumsan magna. Integer dignissim bibendum odio. Donec magna. Fusce tempus dignissim purus. Phasellus pulvinar pretium orci. Sed pede sapien, porttitor sed, dapibus eget, gravida imperdiet, neque. Praesent mi tortor, tristique vel, tincidunt eu, molestie id, felis. Fusce suscipit tortor eget magna. Ut risus.</p>
 
<p>Duis leo magna, tincidunt quis, scelerisque et, dictum id, leo. Nulla facilisi. Proin tincidunt ligula sit amet dui. Sed sem. Nullam eu odio id nisl hendrerit gravida. Ut metus. Phasellus suscipit metus non enim mollis luctus. Donec commodo eros quis sem. Morbi lobortis diam non urna. Quisque ac est. Ut posuere commodo felis. Nunc ligula. Curabitur eget nibh at neque sagittis porttitor.</p>
</div>
</body>
</html>
 
// ------------------------------------------
 
// Page 2 HTML:
 
// ------------------------------------------
 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link rev="made" href="mailto:" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="generator" content="NoteTab Pro 5.5" />
  <meta name="author" content="Perry Wolf" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script type="text/javascript">
$(document).ready(function(){
           $('body').animate({backgroundColor:'#000000'},2500);
           $('#fadeDiv').fadeIn(2500);
});
 
</script>
</head>
<body style="width:100%;height:100%;background:#FFFFFF;color:#FFFFFF;">
<div id="fadeDiv" style="display:none;padding:20px;">
<h1 style="text-align:center;">Page 2</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit urna. Nunc tincidunt sem at diam. Morbi vitae ligula. Mauris magna metus, gravida vel, condimentum gravida, posuere a, dui. Fusce tristique aliquam sapien. Duis sit amet felis a libero ullamcorper facilisis. Nulla ullamcorper leo. Nam molestie rhoncus ipsum. Nunc malesuada felis et nibh. Proin odio libero, elementum interdum, congue non, euismod aliquet, tellus. Aenean tempus aliquet quam. Duis lorem sapien, tempor id, cursus eu, ultrices at, lacus. Donec quis dolor in tortor volutpat consequat. Pellentesque viverra sollicitudin turpis. Vivamus sodales, elit ac placerat elementum, dui tortor adipiscing purus, vel suscipit felis lacus non nibh.</p>
 
<p>Morbi tincidunt magna vitae velit. Maecenas iaculis. Suspendisse sagittis velit eu odio vulputate vehicula. Nunc eu felis eget enim imperdiet dignissim. Nulla nisi. Nunc bibendum, magna vel dapibus feugiat, magna augue condimentum neque, quis tempus purus libero non augue. Duis viverra pretium metus. In hac habitasse platea dictumst. Proin luctus diam nec urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed felis. Integer porttitor accumsan magna. Integer dignissim bibendum odio. Donec magna. Fusce tempus dignissim purus. Phasellus pulvinar pretium orci. Sed pede sapien, porttitor sed, dapibus eget, gravida imperdiet, neque. Praesent mi tortor, tristique vel, tincidunt eu, molestie id, felis. Fusce suscipit tortor eget magna. Ut risus.</p>
 
<p>Duis leo magna, tincidunt quis, scelerisque et, dictum id, leo. Nulla facilisi. Proin tincidunt ligula sit amet dui. Sed sem. Nullam eu odio id nisl hendrerit gravida. Ut metus. Phasellus suscipit metus non enim mollis luctus. Donec commodo eros quis sem. Morbi lobortis diam non urna. Quisque ac est. Ut posuere commodo felis. Nunc ligula. Curabitur eget nibh at neque sagittis porttitor.</p>
</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:paulCardiff
ID: 31569499
Top draw - thanks a lot !!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

717 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