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:


My Personal Notes arrow_drop_up

Small things always make you to think big

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.