當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .hide()用法及代碼示例


用法 
.hide() => jQuery

說明：隱藏匹配的元素。

  • 添加的版本：1.0.hide()

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

  • 添加的版本：1.0.hide( [duration ] [, complete ] )

    • duration(默認：400)
      類型：Number 或 String
      確定動畫將運行多長時間的字符串或數字。
    • complete
      類型：Function ()
      動畫完成後調用的函數，每個匹配元素調用一次。

  • 添加的版本：1.0.hide( options )

    • options
      類型：PlainObject
      要傳遞給方法的附加選項的映射。
      • duration(默認：400)
        類型：Number 或 String
        確定動畫將運行多長時間的字符串或數字。
      • easing(默認：swing)
        類型：String
        一個字符串，指示用於轉換的緩動函數。
      • queue(默認：true)
        類型：Boolean 或 String
        一個布爾值，指示是否將動畫放置在效果隊列中。如果為 false，動畫將立即開始。As of jQuery 1.7， queue 選項也可以接受一個字符串，在這種情況下，動畫被添加到該字符串表示的隊列中。當使用自定義隊列名稱時，動畫不會自動啟動；你必須調用.dequeue("queuename")開始它。
      • specialEasing
        類型：PlainObject
        一個對象，包含一個或多個由 properties 參數定義的 CSS 屬性及其相應的緩動函數。(添加的版本：1.4)
      • step
        類型：Function(現在是Number，Tween補間)
        為每個動畫元素的每個動畫屬性調用的函數。此函數提供了修改 Tween 對象以在設置之前更改屬性值的機會。
      • progress
        類型：Function(Promise動畫，Number進度，NumberremainingMs)
        在動畫的每個步驟之後要調用的函數，每個動畫元素僅調用一次，而與動畫屬性的數量無關。(添加的版本：1.8)
      • complete
        類型：Function ()
        元素上的動畫完成後調用的函數。
      • start
        類型：Function(Promise動畫)
        當元素上的動畫開始時調用的函數。(添加的版本：1.8)
      • done
        類型：Function(Promise 動畫，Boolean jumpedToEnd)
        當元素上的動畫完成(其 Promise 對象已解析)時要調用的函數。(添加的版本：1.8)
      • fail
        類型：Function(Promise 動畫，Boolean jumpedToEnd)
        當元素上的動畫未能完成時調用的函數(其 Promise 對象被拒絕)。(添加的版本：1.8)
      • always
        類型：Function(Promise 動畫，Boolean jumpedToEnd)
        當元素上的動畫完成或停止但未完成時調用的函數(其 Promise 對象被解析或拒絕)。(添加的版本：1.8)

  • 添加的版本：1.4.3.hide( duration [, easing ] [, complete ] )

    • duration(默認：400)
      類型：Number 或 String
      確定動畫將運行多長時間的字符串或數字。
    • easing(默認：swing)
      類型：String
      一個字符串，指示用於轉換的緩動函數。
    • complete
      類型：Function ()
      動畫完成後調用的函數，每個匹配元素調用一次。

在沒有參數的情況下，.hide() 方法是隱藏元素的最簡單方法：

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

匹配的元素將立即隱藏，沒有動畫。這大致相當於調用 .css( "display", "none" ) ，除了 display 屬性的值保存在 jQuery 的數據緩存中，以便以後可以將 display 恢複為其初始值。如果一個元素的 display 值為 inline 並且被隱藏然後顯示，它將再次顯示為 inline 。

當提供持續時間、普通對象或"complete" 函數時，.hide() 成為動畫方法。 .hide() 方法同時為匹配元素的寬度、高度和不透明度設置動畫。當這些屬性達到 0 時，將 display 樣式屬性設置為 none 以確保元素不再影響頁麵的布局。

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

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

從 jQuery 開始1.4.3，可以使用命名緩動函數的可選字符串。緩動函數指定動畫在動畫中不同點的進展速度。 jQuery 庫中唯一的緩動實現是默認的，稱為swing，並且以恒定的速度前進，稱為linear.使用plug-ins 可以使用更多的緩動函數，最值得注意的是jQuery UI 套件.

如果提供，則在動畫完成後觸發回調。這對於將不同的動畫按順序串在一起很有用。回調未發送任何參數，但 this 設置為正在動畫的 DOM 元素。如果為多個元素設置了動畫，請務必注意，每個匹配的元素都會執行一次回調，而不是對整個動畫執行一次。

注意：此方法可能會導致性能問題，尤其是在許多元素上使用時。如果您遇到此類問題，請使用性能測試工具來確定是否是此方法導致的。此外，如果顯示值在不同的視口大小下不同，則此方法可能會導致響應式布局出現問題。

我們可以為任何元素設置動畫，例如簡單的圖像：

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

其他注意事項：

  • 所有 jQuery 效果，包括 .hide() ，都可以通過設置 jQuery.fx.off = true 來全局關閉，這有效地將持續時間設置為 0。有關更多信息，請參閱 jQuery.fx.off 。

例子：

隱藏所有段落，然後單擊鏈接。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <script src="https://code.jquery.com/jquery-3.5.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" ).click(function( event ) {
  event.preventDefault();
  $( this ).hide();
});
</script>
 
</body>
</html>

演示：

動畫所有顯示的段落以緩慢隱藏，在 600 毫秒內完成動畫。

<!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.5.0.js"></script>
</head>
<body>
 
<button>Hide 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).hide( "slow" );
});
</script>
 
</body>
</html>

演示：

動畫所有跨度(在本例中為單詞)以快速隱藏，在 200 毫秒內完成每個動畫。一旦每個動畫完成，它就會開始下一個動畫。

<!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.5.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" ).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" ).click(function() {
  $( "span" ).show( 2000 );
});
</script>
 
</body>
</html>

演示：

單擊超過 2 秒時隱藏 div，然後在隱藏時刪除 div 元素。嘗試一次單擊多個框。

<!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.5.0.js"></script>
</head>
<body>
 
<div></div>
 
<script>
for ( var i = 0; i < 5; i++ ) {
  $( "<div>" ).appendTo( document.body );
}
$( "div" ).click(function() {
  $( this ).hide( 2000, function() {
    $( this ).remove();
  });
});
</script>
 
</body>
</html>

演示：

相關用法


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