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.

animating object

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.

animating object in jquery
animating object in jquery
animating object in jscript

I hope you might have liked the example.

With Regards,

Vishal Gilbile.

Up Next
    Ebook Download
    View all
    Learn
    View all