Animating Objects (Images) Using Javascript

In this article we are going to learn how to animate images from one place to another place on the webpage. In this article I'm using the JavaScript function setInterval() and clearInterval() to move the objects.

The following is the design of the application.



The following is the source code for it.

<html>
<head>
<title>Animating Object</title>
<script>
function Animate() {
window.status = "Take Off from Mumbai...";
if (document.getElementById("b1").value == "Animate") {
document.getElementById("b1").value = "Reset";
Timer = setInterval("MoveUp()", 50);
}
else {
clearInterval(Timer);
document.getElementById("b1").value = "Animate";
document.getElementById("cop").style.left = "10px";
document.getElementById("cop").style.top = "430px";
}
}
function destroy() {
document.getElementById("b1").value = "Destroy";
}
function reset() {
document.getElementById("b1").value = "Reset";
}
function MoveUp() {
document.getElementById("cop").style.top = document.getElementById("cop").style.pixelTop - 3;
if (document.getElementById("cop").style.pixelTop < 35) {
clearInterval(Timer);
Timer = setInterval("MoveRight()", 25);
};
}
function MoveRight() {
document.getElementById("cop").style.left = document.getElementById("cop").style.pixelLeft + 3;
if (document.getElementById("cop").style.pixelLeft > 700) {
clearInterval(Timer);
window.status = "Landing in Delhi";
Timer = setInterval("MoveDown()", 25);
};
}
function MoveDown() {

document.getElementById("cop").style.top = document.getElementById("cop").style.pixelTop + 3;
if (document.getElementById("cop").style.pixelTop > 430) {
clearInterval(Timer);
window.status = "Reached Delhi";
}
}
</script>
</head>
<body>
<img id="cop" style="left: 10px; position: absolute; top: 430px;" src="images/COPTER.gif">
<hr style="top: 500px; width: 100%; position: absolute">
<span style="top: 505px; position: absolute; font-face: Monotype Corsiva; font-size: 20pt;
font-weight: bold; color: red">Mumbai</span><span style="top: 505px; left: 820px;
position: absolute; font-face: Monotype Corsiva; font-size: 20pt; font-weight: bold;
color: green">Delhi</span>
<input type="Button" id="b1" onclick="Animate()" value="Animate">
</body>
</html>

The following is the output after clicking the Animate Button.





I hope you might have liked the example.

With Regards,

Vishal Gilbile.