.fadeIn()

類別： 效果 > 淡入淡出

.fadeIn( [duration ] [, complete ] )傳回： jQuery

說明： 透過淡入不透明的方式顯示相符的元素。

  • 新增版本： 1.0.fadeIn( [duration ] [, complete ] )

    • duration（預設：400）
      類型： 數字 或 字串
      決定動畫執行時間的字串或數字。
    • complete
      類型： 函式()
      動畫完成後呼叫一次的函式，每個相符的元素呼叫一次。

  • 新增版本： 1.0.fadeIn( options )

    • options
      類型： PlainObject
      傳遞給方法的其他選項的對應表。
      • duration（預設：400）
        類型： 數字 或 字串
        決定動畫執行時間的字串或數字。
      • easing (預設：swing)
        類型：字串
        字串表示要使用在轉場中的哪個緩動函數。
      • queue (預設：true)
        類型：布林值 或 字串
        布林值表示是否將動畫放置在效果佇列中。如果為 false，動畫將立即開始。從 jQuery 1.7 開始，佇列選項也可以接受字串，這種情況下動畫會被加入由該字串表示的佇列中。當使用自訂佇列名稱時，動畫不會自動開始；您必須呼叫 .dequeue("queuename") 來開始它。
      • specialEasing
        類型： PlainObject
        包含一個或多個由屬性參數定義的 CSS 屬性及其對應緩動函數的物件。（新增版本：1.4）
      • step
        類型：函數( 數字 now, Tween tween )
        針對每個動畫元素的每個動畫屬性呼叫的函數。此函數提供修改 Tween 物件以在設定屬性值之前變更其值的機會。
      • progress
        類型：函數( Promise animation, 數字 progress, 數字 remainingMs )
        在動畫的每個步驟後呼叫的函數，每個動畫元素只呼叫一次，與動畫屬性的數量無關。（新增版本：1.8）
      • complete
        類型： 函式()
        在元素上的動畫完成後呼叫一次的函數。
      • start
        類型：函式( 承諾 動畫 )
        當元素上的動畫開始時要呼叫的函式。（版本新增：1.8）
      • done
        類型：函式( 承諾 動畫, 布林值 jumpedToEnd )
        當元素上的動畫完成時要呼叫的函式（其承諾物件已解析）。（版本新增：1.8）
      • fail
        類型：函式( 承諾 動畫, 布林值 jumpedToEnd )
        當元素上的動畫無法完成時要呼叫的函式（其承諾物件已拒絕）。（版本新增：1.8）
      • always
        類型：函式( 承諾 動畫, 布林值 jumpedToEnd )
        當元素上的動畫完成或在未完成的情況下停止時要呼叫的函式（其承諾物件已解析或拒絕）。（版本新增：1.8）

  • 版本新增：1.4.3.fadeIn( [duration ] [, easing ] [, complete ] )

    • duration（預設：400）
      類型： 數字 或 字串
      決定動畫執行時間的字串或數字。
    • easing (預設：swing)
      類型：字串
      字串表示要使用在轉場中的哪個緩動函數。
    • complete
      類型： 函式()
      動畫完成後呼叫一次的函式，每個相符的元素呼叫一次。

.fadeIn() 方法會對符合條件的元素的不透明度進行動畫處理。它類似於 .fadeTo() 方法，但該方法不會取消隱藏元素，而且可以指定最終的不透明度等級。

持續時間以毫秒為單位；較高的值表示較慢的動畫，而不是較快的動畫。字串 'fast' 和 'slow' 可以分別用來表示 200 和 600 毫秒的持續時間。如果提供任何其他字串，或省略 duration 參數，則會使用預設持續時間 400 毫秒。

我們可以對任何元素進行動畫處理，例如一個簡單的影像

1
2
3
4
5
6
7
8
9
10
11
 
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
 
// With the element initially hidden, we can show it slowly:
$( "#clickme" ).on( "click", function() {
  $( "#book" ).fadeIn( "slow", function() {
    // Animation complete
  });
});
圖 1 - fadeIn() 效果的說明

緩衝

自 jQuery 1.4.3 起，可以使用選擇性字串來命名緩衝函數。緩衝函數指定動畫在動畫中不同點進展的速度。jQuery 函式庫中唯一的緩衝實作是預設值，稱為 swing，以及以恆定速度進展的 linear。可以使用外掛程式取得更多緩衝函數，最著名的是 jQuery UI 組合。

回呼函數

如果提供，動畫完成後會觸發回呼。這對於將不同的動畫串接在一起很有用。回呼不會傳送任何參數，但 this 會設定為正在播放動畫的 DOM 元素。如果播放多個元素的動畫，請務必注意，回呼會針對每個符合的元素執行一次，而不是針對整個動畫執行一次。

自 jQuery 1.6 起，.promise() 方法可以與 deferred.done() 方法結合使用，以在 所有 符合的元素完成動畫時，針對整個動畫執行單一回呼（請參閱 .promise() 範例）。

其他注意事項

  • 所有 jQuery 效果，包括 .fadeIn()，都可以透過設定 jQuery.fx.off = true 來關閉，這會將持續時間有效設定為 0。如需更多資訊，請參閱 jQuery.fx.off。

範例

播放隱藏 div 的動畫，逐一淡入，每個動畫在 600 毫秒內完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeIn demo</title>
  <style>
  span {
    color: red;
    cursor: pointer;
  }
  div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
  }
  #one {
    background: #f00;
  }
  #two {
    background: #0f0;
  }
  #three {
    background: #00f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
 
<script>
$( document.body ).on( "click", function() {
  $( "div:hidden" ).first().fadeIn( "slow" );
} );
</script>
 
</body>
</html>

示範

在文字上方淡入紅色區塊。動畫完成後，會快速淡入更多文字在上方。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeIn demo</title>
  <style>
  p {
    position: relative;
    width: 400px;
    height: 90px;
  }
  div {
    position: absolute;
    width: 400px;
    height: 65px;
    font-size: 36px;
    text-align: center;
    color: yellow;
    background: red;
    padding-top: 25px;
    top: 0;
    left: 0;
    display: none;
  }
  span {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>
  Let it be known that the party of the first part
  and the party of the second part are henceforth
  and hereto directed to assess the allegations
  for factual correctness... (<a href="#">click!</a>)
  <div><span>CENSORED!</span></div>
</p>
 
<script>
$( "a" ).on( "click", function() {
  $( "div" ).fadeIn( 3000, function() {
    $( "span" ).fadeIn( 100 );
  });
  return false;
});
</script>
 
</body>
</html>

示範