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.
<!DOCTYPE html> <html>   <head>     <title>         How to animate div width and height         on mouse hover in jQuery ?     </title>           <script src=     </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 neveropen.                 </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=     </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 neveropen.                 </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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
