.hide()

分類： 效果 > 基礎

.hide()傳回： jQuery

說明： 隱藏符合的元素。

  • 新增版本： 1.0.hide()

    • 此簽章不接受任何參數。

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

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

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

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

  • 版本新增：1.4.3.hide( 持續時間 [, easing ] [, 完成 ] )

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

如果沒有參數，.hide() 方法是最簡單的隱藏元素的方法

1
 
$( ".target" ).hide();

匹配的元素將立即隱藏，沒有動畫。這大致等同於呼叫 .css( "display", "none" )，但 display 屬性的值會儲存在 jQuery 的資料快取中，以便稍後將 display 還原為其初始值。如果元素的 display 值為 inline，且被隱藏然後顯示，它將再次顯示為 inline。

當提供持續時間、純粹物件或「完成」函數時，.hide() 會變成動畫方法。.hide() 方法會同時為匹配的元素設定寬度、高度和不透明度動畫。當這些屬性達到 0 時，display 樣式屬性會設定為 none，以確保元素不再影響頁面的配置。

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

請注意，.hide() 會立即觸發，如果未指定持續時間或持續時間為 0，則會覆寫動畫佇列。

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

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

注意：此方法可能會導致效能問題，特別是在許多元素上使用時。如果您遇到此類問題，請使用效能測試工具來確定此方法是否導致這些問題。此外，如果顯示值在不同的視窗大小下有所不同，此方法可能會導致回應式版面配置的問題。

我們可以動畫化任何元素，例如一個簡單的圖片

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

其他注意事項

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

範例

按一下時隱藏所有段落，然後隱藏連結。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
 
<script>
$( "p" ).hide();
$( "a" ).on( "click", function( event ) {
  event.preventDefault();
  $( this ).hide();
});
</script>
 
</body>
</html>

示範

動畫顯示所有段落，並慢慢隱藏，在 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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <style>
  p {
    background: #dad;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Hide 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
 
<script>
$( "button" ).on( "click", function() {
  $( "p" ).hide( "slow" );
});
</script>
 
</body>
</html>

示範

動畫顯示所有 span（此範例為單字），並快速隱藏，在 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
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <style>
  span {
    background: #def3ca;
    padding: 3px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button id="hider">Hide</button>
<button id="shower">Show</button>
<div>
  <span>Once</span> <span>upon</span> <span>a</span>
  <span>time</span> <span>there</span> <span>were</span>
  <span>three</span> <span>programmers...</span>
</div>
 
<script>
$( "#hider" ).on( "click", function() {
  $( "span:last-child" ).hide( "fast", function() {
    // Use arguments.callee so we don't need a named function
    $( this ).prev().hide( "fast", arguments.callee );
  });
});
$( "#shower" ).on( "click", function() {
  $( "span" ).show( 2000 );
});
</script>
 
</body>
</html>

示範

在 2 秒後隱藏 div，然後在隱藏後移除 div 元素。請嘗試一次點選多個方塊。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <style>
  div {
    background: #ece023;
    width: 30px;
    height: 40px;
    margin: 2px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
 
<script>
for ( var i = 0; i < 5; i++ ) {
  $( "<div>" ).appendTo( document.body );
}
$( "div" ).on( "click", function() {
  $( this ).hide( 2000, function() {
    $( this ).remove();
  });
});
</script>
 
</body>
</html>

示範