如何在 jQuery 中使用 hide() 方法？

jQuery 中的hide()方法用于隐藏选定的 Web 元素。在本文中，我们将详细讨论hide()方法。这个方法一般用于jQuery中的效果或者动画。它还允许我们为隐藏任何特定元素的行为（过渡）设置动画。

句法：

.hide( duration, easing, complete )

参数：这个方法 具有以下参数：

• 持续时间：它将决定任何动画将运行多长时间。它可以是字符串或数字。可能的值为“快”、“慢”或以毫秒为单位的时间。默认值为 400（以毫秒为单位）。
• 缓动：它将确定哪个缓动函数用于元素的过渡。可能的值是“摆动”和“线性”。默认值为“摆动”。
• complete：动画完成时调用此函数。每次选定的 Web 元素都会调用此函数。

注意：如果我们不使用任何参数，元素将隐藏而没有任何特殊的过渡或效果。我们不必每次都使用每个参数，为了方便起见，我们可以使用其中的任何一个。

现在让我们谈谈我们如何使用这种方法使事情变得简单。我们可以使用它在单击按钮、悬停和单击元素本身时隐藏所选元素，我们还可以设置一个计时器，以便在延迟后隐藏所选元素。

让我们看一些hide()方法的例子，以便更好地理解它的工作原理。

CDN 链接：以下 jQuery 库文件用于其工作的所有代码，包含在每个 HTML 代码的 部分。

https://code.jquery.com/jquery-3.6.0.min.js

示例 1：在本示例中，我们将hide()方法设置为一个按钮，这样当按钮被点击时，所选元素将被隐藏。元素可以是图像、div、h1等。

HTML

  
    
    
    
  
    
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: rgb(24, 24, 24);
        height: 100vh;
      }
      button {
        margin: 50px;
        height: 50px;
        width: 100px;
      }
      h1 {
        color: green;
      }
    
  
  
  
    
      GeeksforGeeks
  
      Hide
    
  
    
    
      $(document).ready(function () {
        $("#btn").click(function () {
          $("h1").hide();
        });
      });
    
  

输出：

示例 2：在下面的示例中，如果我们将鼠标悬停在所选元素上，它将隐藏。使用此代码片段并替换示例 1 的 标记中的代码以获得此结果。

HTML

    
    
    
    
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: rgb(24, 24, 24);
        height: 100vh;
      }
      button {
        margin: 50px;
        height: 50px;
        width: 100px;
      }
      h1 {
        color: green;
      }
     
 

    
      GeeksforGeeks
    
  
    
    
      $(document).ready(function () {
        $("h1").hover(function () {
          $("h1").hide();
        });
      });
    

输出：

示例 3：对于此示例，我们将设置一个 2 秒的计时器，经过该时间后，每当我们单击隐藏按钮时，所选元素将被隐藏。使用此代码片段并替换示例 1 的 标记内的代码以获得此结果。

HTML

    
    
    
    
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: rgb(24, 24, 24);
        height: 100vh;
      }
      button {
        margin: 50px;
        height: 50px;
        width: 100px;
      }
      h1 {
        color: green;
      }
     


    
      GeeksforGeeks
      Hide
    
  
    
    
      $(document).ready(function () {
        $("#btn").click(function () {
          $("h1").delay(2000).hide("fast");
        });
      });
    

输出：

示例 4：在此示例中，我们将使用持续时间参数并应用所选元素的慢速和快速隐藏过渡。我们有两个文本元素和两个按钮，一个会慢慢隐藏文本，第二个会立即隐藏文本。在示例 1 中使用此代码片段。

HTML

    
    
    
    
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: rgb(24, 24, 24);
        height: 100vh;
      }
      button {
        margin: 50px;
        height: 50px;
        width: 100px;
      }
      h1 {
        color: green;
      }
     


    
      GeeksforGeeks
      Slow hide
      GeeksforGeeks
      Fast hide
    
  
    
    
      $(document).ready(function () {
        $("#btn").click(function () {
          $("h1").hide("slow");
        });
        $("#btn1").click(function () {
          $("h2").hide("fast");
        });
      }
      );
    

输出：

示例 5：对于此示例，我们将看到如何使用回调函数，以便在隐藏效果完成时调用该函数。我们会在隐藏效果完成后设置提醒信息。在示例 1 中使用此代码片段。

HTML

    
    
    
    
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: rgb(24, 24, 24);
        height: 100vh;
      }
      button {
        margin: 50px;
        height: 50px;
        width: 100px;
      }
      h1 {
        color: green;
      }
     


    
      GeeksforGeeks
      Slow hide
    
  
    
    
      $(document).ready(function () {
        $("#btn").click(function () {
          $("h1").hide("slow",function(){
              alert('The text is hidden!')
          });
        });
      }
      );
    

输出：