JQuery fadeIn()用法及代碼示例

jQuery中的fadeIn()方法用於將所選元素的不透明度從隱藏更改為可見。隱藏的元素將不會顯示。

用法:

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

參數：此方法接受上述和以下所述的三個參數：

Speed:它是一個可選參數，用於指定衰落效果的速度。速度的默認值為400毫秒。可能的速度值為：
- 毫秒
- “slow”
- “fast”
Easing:它是一個可選參數，用於指定元素到動畫不同點的速度。緩動的默認值為“swing”。放鬆的可能價值是：
- “swing”
- “linear”
Callback:它是可選參數。在fadeIn()方法完成後，將執行回調函數。

以下示例說明了jQuery中的fadeIn()方法：

示例1:本示例描述了速度為1000毫秒的fadeIn()方法。

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            fadeIn() Method in jQuery 
        </title> 
          
        <style> 
            #Outer { 
                border: 1px solid black; 
                padding-top: 40px; 
                height: 140px; 
                background: green; 
                display: none; 
            } 
        </style> 
          
        <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
        </script> 
    </head> 
      
    <body style = "text-align:center;">   
          
        <div id= "Outer"> 
            <h1 style = "color:white;" >   
                GeeksForGeeks   
            </h1>   
        </div><br> 
          
        <button id = "btn">  
            Fade In 
        </button>  
          
        <!-- jQuery script of fadeIn() method -->
        <script>  
            $(document).ready(function() { 
                $("#btn").click(function() { 
                    $("#Outer").fadeIn(1000); 
                }); 
            }); 
        </script>  
    </body>   
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：

示例2:本示例介紹了通過放寬“swing”的fadeIn()方法。

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            fadeIn() Method in jQuery 
        </title> 
          
        <style> 
            #Outer { 
                border: 1px solid black; 
                padding-top: 40px; 
                height: 140px; 
                background: green; 
                display: none; 
            } 
        </style> 
          
        <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
        </script> 
    </head> 
      
    <body style = "text-align:center;">   
          
        <div id= "Outer"> 
            <h1 style = "color:white;" >   
                GeeksForGeeks   
            </h1>   
        </div><br> 
          
        <button id = "btn">  
            Fade In 
        </button>  
          
        <!-- jQuery script of fadeIn() method -->
        <script>  
            $(document).ready(function() { 
                $("#btn").click(function() { 
                    $("#Outer").fadeIn("swing"); 
                }); 
            }); 
        </script>  
    </body>   
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：

相關用法

注：本文由純淨天空篩選整理自PranchalKatiyar大神的英文原創作品 jQuery | fadeIn() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。