Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need a delay for 2 Seconds ....

    Hi

    I am creating an animation based on Sam Dunn's tutorial 'Animate Curtains Opening with jQuery'

    ( http://buildinternet.com/2009/07/ani...g-with-jquery/ ).

    What i need to do is create a 2 second delay in the curtains opening in order to give enough time for an iframe, thats behind the curtains, to load it's content.

    Here is Sam's script :


    -----------------------------------------------------------------


    <!--
    Animate a Curtain Opening with jQuery
    index.html
    By Sam Dunn
    2009 Build Internet! www.buildinternet.com
    -->

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Animate a Curtain Opening with jQuery | Build Internet</title>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script src="jquery.easing.1.3.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function() {

    $curtainopen = false;

    $(".rope").click(function(){
    $(this).blur();
    if ($curtainopen == false){
    $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
    $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
    $(".rightcurtain").stop().animate({width:'60px'},2000 );
    $curtainopen = true;
    }else{
    $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
    $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
    $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
    $curtainopen = false;
    }
    return false;
    });

    });
    </script>
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    body {
    text-align: center;
    background: #4f3722 url('images/darkcurtain.jpg') repeat-x;
    }
    img{
    border: none;
    }
    .leftcurtain{
    width: 50%;
    height: 495px;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 2;
    }
    .rightcurtain{
    width: 51%;
    height: 495px;
    right: 0px;
    top: 0px;
    position: absolute;
    z-index: 3;
    }
    .rightcurtain img, .leftcurtain img{
    width: 100%;
    height: 100%;
    }
    .logo{
    margin: 0px auto;
    margin-top: 150px;
    }
    .rope{
    position: absolute;
    top: -40px;
    left: 70%;
    z-index: 4;
    }

    </style>
    </head>

    <body>
    <div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div>
    <div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div>
    <img class="logo" src="images/buildinter.png"/>
    <a class="rope" href="#">
    <img src="images/rope.png"/>
    </a>
    </body>
    </html>


    -----------------------------------------------------------------


    Any help will be greatly appreciated.

    Thanks.

    Jet.

  • #2
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by jetpat View Post
    ......I need to do is create a 2 second delay.........
    Code:
        setTimeout(function() {
            /* execute your code here */
        }, 2000);

    Example:

    Code:
        setTimeout(function() {
            alert('You waited 2 seconds to see me');
        }, 2000);

    Hope this helps.
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •