SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: animate()

  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    animate()

    I would like to auto slide/ease a div from outside the viewport (top) to to a certain position (top: 200px). I was reading the documentation about the animate() Plugin, but can't translate it back to what I want. Any ideas on this are more than welcome.
    Thank you in advance

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This demo should help you get started.

    On page load, it moves a 200 x 200 green div from just off the top of the window to 100px below the top of the window.


    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
    body {
          position: relative
    }
     
    #myDiv {
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute;
        left: 300px
    }
    </style>
    <script type="text/javascript">
     
    var currPos = -230;
    var step = 10;
    var finalTop = 100;
    function moveDiv() {
        currPos += step;
        if(currPos <= finalTop) {
            divO.style.top = currPos + 'px';
            setTimeout('moveDiv()',200);
        } 
    }
     
    window.onload=function() {
        divO = document.getElementById('myDiv');
        moveDiv();
    }
     
    </script>
    </head>
    <body>
     
    <div id="myDiv"></div>
     
    </body>
    </html>

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Kalon. Thanks for the response. It is a start indeed and I thank you for that Do you know of any jQuery plugin like easing or slide, where the movement Is just a bit more fluent? I only found examples where the movement is triggered by a click or hover event

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To be honest, I don't use JQuery but I would imagine there is a function for sliding elements in there somewhere.

    You can play with the step value and the setTimeout interval in the demo code I posted to get a smoother animation.

    If you change the value of step to 2 and the time interval in setTimeout to 10, you will get a much smoother animation.


Bookmarks

Posting Permissions

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