如何使用 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 宽度设置动画。

  

    
        How to animate div width and height
        on mouse hover in jQuery ?
    
      
    
    
  
    
        .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;
        }
    

  

    
         
            GeeksForGeeks 
         
          
        
            jQuery | How to animate div
            width on mouse hover?
        
        
          
        
            
                .animate() method is used
                  
                
                    GEEKSFORGEEKS - A computer 
                    science portal for geeks.
                
            
        
        
          
        
            $(document).ready(function() {
                var divWidth = $(".box").width();
                  
                $(".box").mouseenter(function(){
                    $(this).animate({
                        width: "300"
                    });
                }).mouseleave(function(){
                    $(this).animate({
                        width: divWidth
                    });
                });
            });
        
    

  

输出：

• 当指针在 div 元素上时：
  
• 当指针不在 div 元素上时：
  

示例 2：使用 jQuery 为 Hover 上的 div 高度设置动画。

  

    
        jQuery | How to animate div width
        and height on mouse hover?
    
      
    
    
      
    
        .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;
        }
    

  

    
         
            GeeksForGeeks 
         
          
        
            jQuery | How to animate div
            height on mouse hover?
        
        
          
        
            
                .animate() method is used
                  
                
                    GEEKSFORGEEKS - A computer 
                    science portal for geeks.
                
            
        
          
        
            $(document).ready(function(){
                var divHeight = $(".box").height();
                $(".box").mouseenter(function(){
                    $(this).animate({
                        height: "250"
                    });
                }).mouseleave(function(){
                    $(this).animate({
                        height: divHeight
                    });
                });
            });
        
    

  

输出：

• 当指针在 div 元素上时：
  
• 当指针不在 div 元素上时：