Home >Web Front-end >JS Tutorial >Detailed explanation of usage examples of hide() method in jQuery

Detailed explanation of usage examples of hide() method in jQuery

巴扎黑Original: 2017-06-29 10:48:481684browse

This article mainly introduces the usage of the hide() method in jQuery. It analyzes the definition, function and usage skills of the hide() method in detail in the form of examples. It has certain reference value. Friends who need it can refer to it.

The example in this article describes the usage of the hide() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method can hide matching elements.

Usage of the hide() method:
If this method does not set a time limit for the hiding effect, then the matching elements will be hidden instantly. For example:

The code is as follows:

$("p").hide()

The above code can hide all p elements instantly.
If the method sets a time limit on the hiding effect, then the matching element will be hidden in a more elegant form within the limited event. For example:

The code is as follows:

$("p").hide(2000)

The above code can hide all p elements in 2000 milliseconds (2 seconds ) is hidden.
This method can also trigger a callback function after hiding is completed. For example:

The code is as follows:

$("p").hide(2000,function(){alert("I have hidden it")});

Example code:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>hide()函数-脚本之家</title> 
<style type="text/css">
p{
  color:blue;
  
background-color
:green;
  width:100px;
  height:100px;
  
margin-top
:10px;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
  $("#first").click(function(){
    $(".first").hide();
  })
  $("#second").click(function(){
    $(".second").hide(2000,function(){alert("我隐藏好了")});
  })
})
</script>
</head>
<body>
  <p class="first"></p>
  <p class="second"></p>
  <button id="first">瞬间隐藏</button>
  <button id="second">优雅的隐藏</button>
</body>
</html>

The above code can trigger the callback function after the hiding is completed, so a prompt box pops up.

The above is the detailed content of Detailed explanation of usage examples of hide() method in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Make a simple stopwatch with javascriptNext article：Make a simple stopwatch with javascript

See more

Detailed explanation of usage examples of hide() method in jQuery

Related articles