---
title: "JQuery animate method"  
description: "With the help of animate () method we can create animation effects on html page .In this article I am using animate method to give animation effect on"  
author: "Sachindra Singh"  
published: 2011-02-22  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/466/jquery-animate-method  
category: "jquery"  
tags: ["jquery"]  
reading_time: 1 minute  

---

# JQuery animate method

With the help of animate () method we can create animation effects on html page .In this article I am using animate method to give animation effect on image. It means image height and width will be resized when mouse pointer will over on image as shown below:\

##### Code:

```
<head>     <title>Animate</title>     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   <script type="text/javascript">        $(document).ready(function()       {           $("div").mouseover(function()//mouseover function will execute when mouse pointer will reach on <div>element             {               $("img").animate({ height: 300 }, "slow");//image height will change by using animate method               $("img").animate({ width: 300 }, "slow");         $("img").animate({ height: 100 }, "slow");                $("img").animate({ width: 100 }, "slow           });       }   );     </script></head><body><div   style=" height:100px;width:100px;position:relative"> <img src="Lighthouse.jpg" id="img" style=" height:100px;width:100px;position:relative" </div></body></html>
```

##### Screenshot

![JQuery animate method](https://www.mindstick.com/mindstickarticle/464325ac-6ea3-45ca-b308-a063eedf8000/images/cc77f52f-106a-4e31-a206-b746895d8e1e.png)

Image height and width will change when mouse pointer will over on image as shown below:

##### Screenshot

![JQuery animate method](https://www.mindstick.com/mindstickarticle/464325ac-6ea3-45ca-b308-a063eedf8000/images/3e932f51-ff7e-4c26-abd1-0e523485c2c1.png)

\

---

Original Source: https://www.mindstick.com/articles/466/jquery-animate-method

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
