Javascript

Javascript Animation: Moving Object

Teacher
Gayathri Sudhakar
Category
javascript
Views

Javascript Animation

In this video you will learn about Javascript animation.
By using Javascript you can move any element like (img,div,p).
In this animation program you will use setTimeout() function to execute animation
setTimeout(function_name,duration)
here, function is used to call the function and duration should be mentioned in milliseconds 1 sec = 1000 ms.

Note:Watch our video for detailed explanation in Tamil

Javascript Animation Example Program

(Use Ctrl+c to copy this coding)

<html>
<head>
<title>Javascript Tutorial</title>
</head>
<body>
<h1>Javascript Animation</h1>
<img id="carObj" src="car1.png" style="width: 300px;height:200px;">
<button onclick="moveRight()">START</button>
<button onclick="stop()">STOP</button>
<script type="text/javascript">
var car=document.getElementById('carObj');
car.style.position='relative';
car.style.left='0px';
var animate;
function moveRight()
{
car.style.left=parseInt(car.style.left) + 50 +'px';//distance
animate=setTimeout(moveRight,200);//speed
}
function stop()
{
clearTimeout(animate);
car.style.left='0px';
}

</script>
</body>
</html>