1. 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)

Discussion in 'Styling and Customization Questions' started by fredrikse, Jan 9, 2013.

  1. fredrikse

    fredrikse Active Member

    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/
     

Share This Page