articles

Home / DeveloperSection / Articles / JavaScript-Animation

JavaScript-Animation

Danish Khan4702 16-Nov-2012
Introduction:

In this article I am going to explain about Animation feature which is provided in Java Script and extended

the JavaScript feature. JavaScript is used to move some DOM elements such as <div> Tag or any other tag

in HTML around the page according to the function or any equation specified.

Here are following functions which are frequently used in JavaScript for performing Animation task.

FUNCTIONS

Descriptions

setTimeout(fun,duration) :

This function calls function after the duration (milliseconds) from now

setInterval(fun,Duration):

This function calls function after every duration milliseconds.

clearTimeout(setTimeoutVariable) :

 

This function calls clears any timer set by the setTimeout() function.

 

 

 
First Example to Animate an image:  
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <script type="text/javascript">
        var imgObject = null;
        var animate;
        function getImg() {
            imgObject = document.getElementById('sampleImg');
            imgObject.style.position = 'relative';
            imgObject.style.left = '0px';
        }
        function move() {
            imgObject.style.left = parseInt(imgObject.style.left) + 15 + 'px';
            animate = setTimeout(move, 10);
        }
        function stop() {
            clearTimeout(animate);
            imgObject.style.left = '0px';
        }
        window.onload = getImg;
    </script>
</head>
<body>
    <form>
    <img id="sampleImg" src="msgIcon1.png" />
    <br />
 
 
 <input id="btnMove" type="button" onclick="move()" value="Press" />
 
<input id="btnStop" type="button" onclick="stop()" value="Press to Stop" />
    </form>
</body>
</html>

Output:

JavaScript-Animation


How to use OnMouseOver and OnMouseOut event using JavaScript:  
<html>

<head>
    <script type="text/javascript">
        if (document.images) {
            var image1 = new Image();
            image1.src = "msgIcon1.png";
            var image2 = new Image();
            image2.src = "warning.jpg";
        }
    </script>
</head>
<body>
    <a href="" onmouseover="document.myImage.src=image2.src;"
        onmouseout="document.myImage.src=image1.src;">
        <img name="myImage" src="msgIcon1.png" />
    </a>
</body>
</html>


In this example there are two images; through JavaScript we have provided a


rollover effect, when mouseover


event occurs image 2 displays and when onmouseout event occurs image1 displays.

 

Conclusions:


Through this article I have explained about Animation in JavaScript and how we


can use it to animate HTML elements.


Updated 07-Sep-2019

Leave Comment

Comments

Liked By