How to animate div width and height on mouse hover using jQuery ?
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 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= </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:
Please Login to comment...