.fadeToggle()

分類：效果 | 效果 > 淡入淡出

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

說明：透過動畫化不透明度來顯示或隱藏符合的元素。

  • 新增版本：1.4.4.fadeToggle( [duration ] [, easing ] [, complete ] )

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

  • 版本新增：1.4.4.fadeToggle( options )

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

.fadeToggle() 方法會對符合的元素的不透明度進行動畫。當在可見元素上呼叫時，一旦不透明度達到 0，元素的 display 樣式屬性就會設定為 none，因此元素不再影響頁面的配置。

持續時間以毫秒為單位；較高的值表示較慢的動畫，而不是較快的動畫。字串 'fast' 和 'slow' 可用於分別表示持續時間為 200 和 600 毫秒。

緩動

表示緩動函數的字串會指定動畫在動畫中不同點進展的速度。jQuery 函式庫中唯一的緩動實作是預設值，稱為 swing，以及以恆定速度進展的 linear。可以使用外掛程式取得更多緩動函數，最著名的是 jQuery UI 套件。

回呼函數

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

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

其他注意事項

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

範例

淡入或淡出第一個段落，在 600 毫秒內完成動畫，並使用線性緩動。淡入或淡出最後一個段落 200 毫秒，完成後插入「完成」訊息。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeToggle demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>
 
<script>
$( "button" ).first().on( "click", function() {
  $( "p" ).first().fadeToggle( "slow", "linear" );
} );
$( "button" ).last().on( "click", function() {
  $( "p" ).last().fadeToggle( "fast", function() {
    $( "#log" ).append( "<div>finished</div>" );
  } );
} );
</script>
 
</body>
</html>

示範