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

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.

 
<!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>

Hi Kalon. Thanks for the response. It is a start indeed and I thank you for that :slight_smile: 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

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.