--- title: "JavaScript-Animation" description: "JavaScript-Animation" author: "Danish Khan" published: 2012-11-16 updated: 2019-09-07 canonical: https://www.mindstick.com/articles/1059/javascript-animation category: "javascript" tags: ["javascript"] reading_time: 3 minutes --- # JavaScript-Animation ##### Introduction: In this article I am going to explain about [Animation](https://www.mindstick.com/articles/13040/seven-helpful-tips-to-start-and-grow-an-animation-video-company) [feature](https://www.mindstick.com/forum/541/what-is-new-feature-in-sql-server-2012) which is provided in Java [Script](https://www.mindstick.com/interview/2280/is-jquery-replacement-of-java-script) and extended the [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) feature. JavaScript is used to move some DOM elements such as
Tag or any other tag in HTML around the page according to the [function](https://www.mindstick.com/articles/43970/purchase-suitable-wedding-dresses-for-your-wedding-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: ```        
       
           
``` ## Output: ![JavaScript-Animation](https://www.mindstick.com/mindstickarticle/2db35409-3933-4791-b278-8fc82305d40b/images/3d2c2683-cd32-4551-8660-f415423a5f65.png)\ ## \ ##### How to use OnMouseOver and OnMouseOut event using JavaScript: ```                     ``` \ 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. --- Original Source: https://www.mindstick.com/articles/1059/javascript-animation Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.