Home > DeveloperSection > Articles > JavaScript-Animation

JavaScript-Animation


JavaScript JavaScript 
Ratings:
0 Comment(s)
 2673  View(s)
Rate this:

JavaScript-Animation

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.


Don't want to miss updates? Please click the below button!

Follow MindStick