asked on

Fade out and fade then in on page redirect

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

ASKER CERTIFIED SOLUTION

ziffgone

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

paulCardiff

ASKER

Top draw - thanks a lot !!