How to animate div width and height on mouse hover using jQuery ?

Last Updated : 17 Sep, 2019

In order to animate the div width and height on mouse hover, we can use the jQuery animate() method along with the mouseenter() and mouseleave() methods.

.animate() method: The animate() method changes the state of the element with CSS style. Syntax:
```
$(selector).animate({styles}, para1, para2, para3);
```
.mouseenter() method: The mouseenter() method works when mouse pointer moves over the selected element. Syntax:
```
$(selector).mouseenter(function)
```
.mouseleave() method: The mouseleave() method works when the mouse pointer leaves the selected element. Syntax:
```
$(selector).mouseleave(function)
```

Approach:

Store the actual width and height of the div element on which animation is to be done using $(selector).width() method.
When the mouse pointer event is handle the .mouseenter() and .mouseleave() methods.
When mouse pointer is over the div element, change the width or height style property to new value of div element using .animate() method.
Change the width or height style property of div element to previously stored values.

Example 1: Animating the div width on hover using jQuery.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to animate div width and height
        on mouse hover in jQuery ?
    </title>
    
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </script>

    <style type="text/css">
        .box {
            float:center;
            overflow: hidden;
            background: #32a852;
            width: 400px;
            padding: 0px;
        }
        
        /* Add padding and border to inner
        content for better animation effect */
        .box-inner {
            width: 400px;
            padding: 0px;
            border: 1px solid #000000;
        }
    </style>
</head>

<body>
    <center>
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1> 
        
        <h3>
            jQuery | How to animate div
            width on mouse hover?
        </h3>
        <hr>
        
        <div class="box">
            <div class="box-inner">
                <h4>.animate() method is used</h4>
                
                <p>
                    GEEKSFORGEEKS - A computer 
                    science portal for geeks.
                </p>
            </div>
        </div>
        <hr>
        
        <script type="text/javascript">
            $(document).ready(function() {
                var divWidth = $(".box").width();
                
                $(".box").mouseenter(function(){
                    $(this).animate({
                        width: "300"
                    });
                }).mouseleave(function(){
                    $(this).animate({
                        width: divWidth
                    });
                });
            });
        </script>
    </center>
</body>

</html>

Output:

When pointer is on the div element:
When pointer is not on the div element:

Example 2: Animating the div height on Hover using jQuery.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        jQuery | How to animate div width
        and height on mouse hover?
    </title>
    
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </script>
    
    <style type="text/css">
        .box{
            float:center;
            overflow: hidden;
            background: #32a852;
            width: 400px;
            padding: 0px;
        }

        /* Add padding and border to inner
        content for better animation effect */
        .box-inner{
            width: 400px;
            padding: 0px;
            border: 1px solid #000000;
        }
    </style>
</head>

<body>
    <center>
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1> 
        
        <h3>
            jQuery | How to animate div
            height on mouse hover?
        </h3>
        <hr>
        
        <div class="box">
            <div class="box-inner">
                <h4>.animate() method is used</h4>
                
                <p>
                    GEEKSFORGEEKS - A computer 
                    science portal for geeks.
                </p>
            </div>
        </div><hr>
        
        <script type="text/javascript">
            $(document).ready(function(){
                var divHeight = $(".box").height();
                $(".box").mouseenter(function(){
                    $(this).animate({
                        height: "250"
                    });
                }).mouseleave(function(){
                    $(this).animate({
                        height: divHeight
                    });
                });
            });
        </script>
    </center>
</body>

</html>