如何使用jQuery在鼠标悬停时对div的宽度和高度进行动画处理

为了在鼠标悬停时对div的宽度和高度进行动画处理，我们可以使用jQuery的animate()方法以及mouseenter()和mouseleave()方法。

.animate()方法：animate()方法用CSS样式改变元素的状态。
语法:

$(selector).animate({styles}, para1, para2, para3);

.mouseenter()方法：mouseenter()方法在鼠标指针移动到选定的元素上时工作。
语法:

$(selector).mouseenter(function)

.mouseleave()方法：mouseleave()方法在鼠标指针离开选定的元素时发挥作用。
语法:

$(selector).mouseleave(function)

步骤:

使用$(selector).width()方法存储要做动画的div元素的实际宽度和高度。
当鼠标指针事件是处理.mouseenter()和.mouseleave()方法。
当鼠标指针在div元素上时，使用.animate()方法将宽度或高度样式属性改为div元素的新值。
将div元素的宽度或高度样式属性改为先前存储的值。

实例1：使用jQuery在悬停时对div宽度进行动画处理。

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

输出:

当指针位于div元素上时。
当指针不在div元素上时。

例子2：使用jQuery在悬停时对div的高度进行动画处理。

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