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

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

jQuery中的hide()方法是用来隐藏被选中的网页元素的。在这篇文章中,我们将详细讨论hide()方法。这个方法通常用于jQuery中的效果或动画。它也允许我们对隐藏任何特定元素的行为(过渡)进行动画处理。

语法:

.hide( duration, easing, complete )

参数:该方法有以下参数。

  • duration。它将决定任何动画将运行多长时间。它可以是一个字符串或数字。可能的值是 “快”、”慢”,或以毫秒为单位的时间。默认值是400(以毫秒为单位)。
  • easing。它将决定在元素的过渡中使用哪种缓和功能。可能的值是 “摆动 “和 “线性”。默认值是 “摇摆”。
  • complete。这个函数在动画完成时被调用。每个选定的网络元素每次都会调用这个函数。

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

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

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

CDN链接:以下jQuery库文件被用于所有代码中的工作,它被包含在每个HTML代码的<head>部分。

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

例子1:在这个例子中,我们将为一个按钮设置hide()方法,这样,当按钮被点击时,被选中的元素将被隐藏。这些元素可以是image, div, h1等。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- jQuery CDN link. -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
            integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
    </script>
  
    <style>
      * {
        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;
      }
    </style>
  </head>
  
  <body>
    <div class="container">
      <h1><b>GeeksforGeeks</b></h1>
  
      <button id="btn">Hide</button>
    </div>
  
    <!-- Using hide() method to hide <h1/> element. -->
    <script>
      (document).ready(function () {
        ("#btn").click(function () {
          $("h1").hide();
        });
      });
    </script>
  </body>
</html>

输出:

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

例子2:在下面的例子中,如果我们将鼠标悬停在所选元素上,它就会隐藏起来。使用这个代码片段并替换例1的<body>标签中的代码,就可以得到这个结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jQuery CDN link. -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
            integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
    </script>
    <style>
      * {
        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;
      }
     </style>
</head> 
<body>
    <div class="container">
      <h1><b>GeeksforGeeks</b></h1>
    </div>
  
    <!-- Using hide() method to hide <h1/> element. -->
    <script>
      (document).ready(function () {
        ("h1").hover(function () {
          $("h1").hide();
        });
      });
    </script>
</body>
</html>

输出:

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

例子3:在这个例子中,我们将设置一个2秒的计时器,超过这个时间后,只要我们点击隐藏按钮,所选元素就会被隐藏。使用这个代码片段并替换掉例子1的<body>标签内的代码,就可以得到这个结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jQuery CDN link. -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
            integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
    </script>
    <style>
      * {
        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;
      }
     </style>
</head>
<body>
    <div class="container">
      <h1><b>GeeksforGeeks</b></h1>
      <button id="btn">Hide</button>
    </div>
  
    <!-- Using hide() method to hide <h1/> element. -->
    <script>
      (document).ready(function () {
        ("#btn").click(function () {
          $("h1").delay(2000).hide("fast");
        });
      });
    </script>
</body>
</html>

输出:

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

例子4:在这个例子中,我们将使用duration参数,对选定的元素应用slow和fast隐藏过渡。我们有两个文本元素和两个按钮,一个将缓慢地隐藏文本,第二个将即时地隐藏文本。在例子1中使用这个代码片段。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jQuery CDN link. -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
            integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
    </script>
    <style>
      * {
        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;
      }
     </style>
</head>
<body>
    <div class="container">
      <h1><b>GeeksforGeeks</b></h1>
      <button id="btn">Slow hide</button>
      <h2><b>GeeksforGeeks</b></h2>
      <button id="btn1">Fast hide</button>
    </div>
  
    <!-- Using hide() method to hide <h1/> element. -->
    <script>
      (document).ready(function () {
        ("#btn").click(function () {
          ("h1").hide("slow");
        });
        ("#btn1").click(function () {
          $("h2").hide("fast");
        });
      }
      );
    </script>
</body>
</html>

输出:

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

例子5:在这个例子中,我们将看到如何使用回调函数,以便当隐藏效果完成后,该函数将被调用。我们将在隐藏效果完成后设置一个警报信息。在例1中使用这个代码片段。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jQuery CDN link. -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
            integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
    </script>
    <style>
      * {
        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;
      }
     </style>
</head>
<body>
    <div class="container">
      <h1><b>GeeksforGeeks</b></h1>
      <button id="btn">Slow hide</button>
    </div>
  
    <!-- Using hide() method to hide <h1/> element. -->
    <script>
      (document).ready(function () {
        ("#btn").click(function () {
          $("h1").hide("slow",function(){
              alert('The text is hidden!')
          });
        });
      }
      );
    </script>
</body>
</html>

输出:

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery 方法