jQuery |淡入淡出()方法

jQuery 中的fadeIn() 方法用于将所选元素的不透明度从隐藏更改为可见。隐藏的元素将不会显示。

句法：

$(selector).fadeIn( speed, easing, callback )

参数：此方法接受上面提到和下面描述的三个参数：

• Speed：可选参数，用于指定淡入淡出效果的速度。速度的默认值为 400 毫秒。速度的可能值是：
  • 毫秒
  • “减缓”
  • “快速地”
• Easing：它是一个可选参数，用于指定元素到动画不同点的速度。缓动的默认值是“swing”。宽松的可能值是：
  • “摇摆”
  • “线性”
• 回调：可选参数。回调函数在fadeIn() 方法完成后执行。

下面的例子说明了 jQuery 中的fadeIn() 方法：

示例 1：此示例描述了速度为 1000 毫秒的fadeIn() 方法。

  
  
     
         
            fadeIn() Method in jQuery
        
          
        
            #Outer {
                border: 1px solid black;
                padding-top: 40px;
                height: 140px;
                background: green;
                display: none;
            }
        
          
        
        
    
      
      
          
        
              
                GeeksForGeeks  
              
        
          
         
            Fade In
         
          
        
         
            $(document).ready(function() {
                $("#btn").click(function() {
                    $("#Outer").fadeIn(1000);
                });
            });
         
      
 

输出：
点击按钮前：

点击按钮后：

示例 2：此示例描述了带有缓动“swing”的fadeIn() 方法。

  
  
     
         
            fadeIn() Method in jQuery
        
          
        
            #Outer {
                border: 1px solid black;
                padding-top: 40px;
                height: 140px;
                background: green;
                display: none;
            }
        
          
        
        
    
      
      
          
        
              
                GeeksForGeeks  
              
        
          
         
            Fade In
         
          
        
         
            $(document).ready(function() {
                $("#btn").click(function() {
                    $("#Outer").fadeIn("swing");
                });
            });
         
      
 

输出：
点击按钮前：

点击按钮后：