jQuery |淡入淡出（）方法

jQuery 中的fadeToggle() 方法在fadeIn() 和fadeOut() 方法之间切换。如果元素淡入，fadeToggle() 将淡出。如果元素淡出，fadeToggle() 将淡入。

句法：

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

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

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

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

示例 1：此示例显示给定速度下的fadeToggle() 方法效果。速度可以以毫秒为单位进行设置。

  
  
  
 
     
        jQuery fadeToggle() Method
    
      
    
        #Outer {
          border: 1px solid black;
          padding-top: 40px;
          height: 140px;
          background: green;
          display: none;
        }
    
      
    
    

  
  
      
    
          
            GeeksForGeeks  
          
    
      
     
        Fade Toggle
     
      
               
     
        $(document).ready(function() {
            $("#btn").click(function() {
                $("#Outer").fadeToggle(1000);
            });
        });
     
  
  
 

输出：

• 点击按钮前：
  
• 第一次点击按钮后：
  
• 第二次点击按钮后：
  

示例 2：此示例显示带有摆动缓动的fadeToggle() 方法效果。缓动用于设置元素在动画不同点的速度。

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

输出：

• 点击按钮前：
  
• 第一次点击按钮后：
  
• 第二次点击按钮后：