cari

Rumah >hujung hadapan web >tutorial js >有关jQuery中hide()方法用法实例详解

有关jQuery中hide()方法用法实例详解

巴扎黑
巴扎黑asal
2017-06-29 10:48:481684semak imbas

这篇文章主要介绍了jQuery中hide()方法用法,以实例形式较为详细的分析了hide()方法的定义、功能与使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery中hide()方法用法。分享给大家供大家参考。具体分析如下：

此方法可以将匹配元素隐藏。

hide()方法的用法:
此方法如果没有对隐藏效果加以时间限定，那么匹配元素会被瞬间隐藏。例如：

代码如下:

$("p").hide()

以上代码可以将所有p元素瞬间隐藏。
如果方法对隐藏效果加以时间限定，那么匹配元素将会在限定的事件内以比较优雅的形式隐藏。例如：

代码如下:

$("p").hide(2000)

以上代码可以将所有p元素在2000毫秒(2秒)内隐藏。
此方法也可以在隐藏完成后触发一个回调函数。例如:

代码如下:

$("p").hide(2000,function(){alert("我隐藏好了")});

实例代码:

代码如下:

<!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>

以上代码能够在隐藏完成以后触发回调函数，于是弹出一个提示框。

Atas ialah kandungan terperinci 有关jQuery中hide()方法用法实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：javascript制作简单的秒表Artikel seterusnya：利用JS实现随时间变换页面背景的效果

Artikel berkaitan

Lihat lagi