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:
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.
Leave Comment