<!DOCTYPE html>
<html>
<head>
<title>Date TEST</title>
<style>
#div1{
left:-200px;
width: 200px;
height: 100px;
position: relative;
background-color: red;
}
#div1 span{
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
</head>
<body>
<div id="div1">This is a div for testing animation</br>
<span>TESTING</span>
</div>
</body>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove();
}
}
var timer = null;
function startMove(){
clearInterval(timer);
var oDiv = document.getElementById('div1');
timer = setInterval(function(){
if(oDiv.offsetLeft == 0){
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft + 1 + 'px';
}
}, 30)
}
</script>
</html>
