jQuery |效果淡出()方法

jQuery 中的fadeOut() 方法用于将所选元素的不透明度级别从可见更改为隐藏。通过使用这种方法，淡入淡出的元素不会占用任何空间。

句法：

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

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

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

示例 1：此示例显示淡入淡出效果。

  
 
    
        jQuery | fadeOut() Method
    
  
    
    
 
  
  
  
      
        GeeksForGeeks
      
      
    jQuery | fadeOut() Method
  
    Fade out
  
    Fade in
      
    
    
        $(document).ready(function(){
            $(".btn1").click(function(){
                $("h2").fadeOut()
            });
              
            $(".btn2").click(function(){
                $("h2").fadeIn();
            });
        });
    

  
  

输出

示例 2：此示例创建淡入淡出效果并设置其速度。以毫秒为单位的给定速度。

  
 
    
        jQuery | fadeOut() Method
    
  
    
    
 
  
  
  
      
        GeeksForGeeks
      
      
    jQuery | fadeOut() Method
  
    Fade out
  
    Fade in
  
    
        $(document).ready(function(){
            $(".btn1").click(function(){
                $("h2").fadeOut(1000);
            });
              
            $(".btn2").click(function(){
                $("h2").fadeIn(1000);
            });
        });
    

  
  

输出：
单击淡出按钮后

单击淡入按钮后

示例 3：创建带有警报消息的淡入和淡出效果。

  
 
    
        jQuery | fadeOut() Method
    
  
    
    
 
  
  
  
      
        GeeksForGeeks
      
      
    jQuery | fadeOut() Method
  
    Fade out
  
    Fade in
      
    
    
        $(document).ready(function() {
            $(".btn1").click(function() {
                $("h2").fadeOut(1000, function() {
                    alert("fadeOut() method is finished!");
                });
            });
              
            $(".btn2").click(function() {
                $("h2").fadeIn(1000, function(){
                    alert("fadeIn() method is finished!");
                });
            });
        });
    

  
  

输出：
单击淡出按钮后

单击淡入按钮后