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


Active member

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 index.html will be faded in and faded out and then it will execute a redirect to 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:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<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>
<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;}
<!--<div class="header">-->
<center><p style="width: 830px; line-height: 170%; color: #9F9F9F;">Test test test test</p></center>
<!--<div class="warningband"></div>-->
<div class="main">
<!--<h1>Sorry !</h1>-->
<img src="styles/xenforo/logo.jpg" alt="Test">

Code for custom.js:
$(document).ready(function() {
    $("body").css("display", "none");
    linkLocation = '';
    $("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:
Top Bottom