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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.