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

0 0 2 minutes read

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= 
"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 zambiatek. 
                </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 zambiatek. 
                </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, zambiatek 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!