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