📌  相关文章
📜  如何使用 jQuery 在鼠标悬停时为 div 宽度和高度设置动画?

📅  最后修改于: 2021-11-25 03:29:25             🧑  作者: Mango

为了在鼠标悬停时为 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 ?
    
      
    
  
    

  

    
        

              GeeksForGeeks          

                     

            jQuery | How to animate div             width on mouse hover?         

        
                   
            
                

.animate() method is used

                                   

                    GEEKSFORGEEKS - A computer                      science portal for geeks.                 

            
        
        
                        
  

输出:

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

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



  

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

  

    
        

              GeeksForGeeks          

                     

            jQuery | How to animate div             height on mouse hover?         

        
                   
            
                

.animate() method is used

                                   

                    GEEKSFORGEEKS - A computer                      science portal for geeks.                 

            
        

                        
  

输出:

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