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
    Jul 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple animation with JS in a for..loop.

    Hello,

    I tried simple animation like this:

    <div id="adContainer" style="position:absolute;top:10px;left:10px;height:100px;width:100px; background:lime;">test</div>

    <script type="text/javascript">

    adCont=document.getElementById(adContainer);
    for(i=1;i<100;i++){
    setTimeout("adCont.style.left=i*5+'px'", i*50);
    }

    </script>

    It doesn't work! Div jumps to its destination position instantly. Why is that? Shouldn't last setTimeout be run after 5secs???

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there feedel,

    have a look at this example, it might give you some ideas...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    #adContainer {
        position:absolute;
        top:10px;
        left:10px;
        line-height:100px;
        width:100px; 
        background-color:lime;
        color:black;
        text-align:center;
    }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    
      var i=10;
      var speed=50;
    
    function move() {
       adCont=document.getElementById('adContainer');
       adCont.style.left=i+'px';
    if(i>500) {
       clearTimeout(m);
       return;
     }
       i+=2;
       m=setTimeout('move()',speed);
     }
    window.onload=move;
    
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="adContainer">test</div>
    
    </body>
    </html>
    
    coothead


  •  

    Posting Permissions

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