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

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);
$(selector).animate({styles}, para1, para2, para3);
.mouseenter() method: The mouseenter() method works when mouse pointer moves over the selected element.Syntax:$(selector).mouseenter(function)
$(selector).mouseenter(function)
.mouseleave() method: The mouseleave() method works when the mouse pointer leaves the selected element.Syntax:$(selector).mouseleave(function)
$(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.
<!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.
<!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>
Output:
When pointer is on the div element:
When pointer is not on the div element:
JavaScript
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.