.show()

分類： 效果 > 基礎

.show()傳回： jQuery

說明：顯示匹配的元素。

  • 新增版本： 1.0.show()

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

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

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

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

    • 選項
      類型：PlainObject
      傳遞給方法的其他選項的對應。
      • duration (預設：400)
        類型： 數字 或 字串
        決定動畫執行時間的字串或數字。
      • easing (預設：swing)
        類型：String
        表示要對轉場使用的緩動函數的字串。
      • 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
        類型： 函式()
        在元素上的動畫完成後呼叫一次的函數。
      • start
        類型：Function( Promise animation )
        動畫在元素上開始時呼叫的函式。（版本新增：1.8）
      • done
        類型：函式( 承諾動畫，布林跳到結尾 )
        動畫在元素上完成時呼叫的函式（其承諾物件已解析）。（版本新增：1.8）
      • fail
        類型：函式( 承諾動畫，布林跳到結尾 )
        動畫在元素上未完成時呼叫的函式（其承諾物件已拒絕）。（版本新增：1.8）
      • always
        類型：函式( 承諾動畫，布林跳到結尾 )
        動畫在元素上完成或在未完成的情況下停止時呼叫的函式（其承諾物件已解析或拒絕）。（版本新增：1.8）

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

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

.show() 方法在沒有參數的情況下，是最簡單的顯示元素的方法

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

配對的元素將立即顯示，沒有動畫。這大致等於呼叫 .css( "display", "block" )，但 display 屬性會回復到最初的狀態。如果元素的 display 值為 inline，然後隱藏並顯示，它將再次顯示為 inline。

注意： 如果在樣式中使用 !important，例如 display: none !important，.show() 將不會覆寫 !important。建議使用不同的類別搭配 .addClass()、.removeClass() 或 .toggleClass()。另一種方法是使用 .attr( "style", "display: block !important;" )；但請小心，因為它會覆寫元素的樣式屬性。

當提供持續時間、一般物件或「完成」函式時，.show() 會成為動畫方法。.show() 方法會同時對應元素的寬度、高度和不透明度進行動畫處理。

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

從 jQuery 1.4.3 開始，可以使用命名緩衝函式的選用字串。緩衝函式會指定動畫在動畫中不同點的進行速度。jQuery 函式庫中唯一的緩衝實作是預設值，稱為 swing，以及以恆定速度進行的實作，稱為 linear。更多緩衝函式可透過使用外掛程式取得，最著名的是 jQuery UI 套件。

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

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

我們可以對任何元素進行動畫處理，例如簡單的圖片

1
2
3
4
5
6
7
8
9
10
 
<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" ).show( "slow", function() {
    // Animation complete.
  });
});
圖 1 - show() 效果說明

其他注意事項

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

範例

對所有隱藏的段落進行動畫處理以慢慢顯示，在 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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Show it</button>
<p style="display: none">Hello  2</p>
 
<script>
$( "button" ).on( "click", function() {
  $( "p" ).show( "slow" );
});
</script>
 
</body>
</html>

示範

顯示第一個 div，然後依序顯示每個相鄰的兄弟 div，動畫時間為 200 毫秒。每個動畫會在先前兄弟 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
34
35
36
37
38
39
40
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  div {
    background: #def3ca;
    margin: 3px;
    width: 80px;
    display: none;
    float: left;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello 3,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
 
<script>
$( "#showr" ).on( "click", function() {
  $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
  });
});
 
$( "#hidr" ).on( "click", function() {
  $( "div" ).hide( 1000 );
});
</script>
 
</body>
</html>

示範

以動畫顯示所有 span 和 input 元素。動畫完成後變更文字。

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
52
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  span {
    display: none;
  }
  div {
    display: none;
  }
  p {
    font-weight: bold;
    background-color: #fcd;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Do it!</button>
<span>Are you sure? (type 'yes' if you are) </span>
<div>
  <form>
    <input type="text"  value="as;ldkfjalsdf">
  </form>
</div>
<p style="display:none;">I'm hidden...</p>
 
<script>
function doIt() {
  $( "span,div" ).show( "slow" );
}
// Can pass in function name
$( "button" ).on( "click", doIt );
 
$( "form" ).on( "submit", function( event ) {
  if ( $( "input" ).val() === "yes" ) {
    $( "p" ).show( 4000, function() {
      $( this ).text( "Ok, DONE! (now showing)" );
    } );
  }
  $( "span,div" ).hide( "fast" );
 
  // Prevent form submission
  event.preventDefault();
} );
</script>
 
</body>
</html>

示範