• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Help with JQUERY (fade in/fade out/redirect)

fredrikse

Active member
#1
Hi,

I need a little help with a page transition that I want to make with help of Jquery.

This is the scenario. The first page a visitor will land on is www.domain.com/index.html. index.html will be faded in and faded out and then it will execute a redirect to www.domain.com/community. I have managed to get the "faded in" part right. But the "faded out" part and the redirection I have not managed to get right at the moment.

HTML code:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
 
<title>Welcome!</title>
<style type="text/css">
    * {font-family: Arial,Helvetica,Verdana,sans-serif;}
    body {background-color: #FFFFFF; cursor: default;margin:0;}
    h1 {font-size: 30pt; text-align:center;}
    p {font-size: 14pt; text-align:center;}
    .header {padding: 30px; margin:0 auto; text-align:center;}
    .main {background: #ffffff; padding-top: 5px; margin:0 auto; text-align:center;height:200px;}
    .footer {padding-top: 5px; margin:0 auto; text-align:center;height:100%;margin-top:20px;}
    .warningband {border: none; background-image: url(styles/default/xenforo/warning_stripes.png); padding: 10px 0; width: 100%; padding: 30px;}
</style>
</head>
<body>
<!--<div class="header">-->
</br></br></br></br></br></br></br></br></br></br></br></br>
<center><p style="width: 830px; line-height: 170%; color: #9F9F9F;">Test test test test</p></center>
</div>
<!--<div class="warningband"></div>-->
<div class="main">
<!--<h1>Sorry !</h1>-->
</br></br>
<center>
<img src="styles/xenforo/logo.jpg" alt="Test">
</center>
</div>
</body>
</html>
Code for custom.js:
Code:
$(document).ready(function() {
 
    $("body").css("display", "none");
 
    linkLocation = 'http://www.domain.com/community/';
 
    $("body").fadeIn(2000);
    $("body").fadeOut(2000, redirectPage);
   
    function redirectPage() {
        window.location = linkLocation;
    }
 
});
The real magic is taking place in custom.js. Right now it fades in and the redirects without a proper fade out which is what I want. This is the original source for this code: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/