jQuery中hide()方法用法实例


Posted in Javascript onDecember 24, 2014

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

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

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

$("div").hide()

以上代码可以将所有div元素瞬间隐藏。
如果方法对隐藏效果加以时间限定,那么匹配元素将会在限定的事件内以比较优雅的形式隐藏。例如:
$("div").hide(2000)

以上代码可以将所有div元素在2000毫秒(2秒)内隐藏。
此方法也可以在隐藏完成后触发一个回调函数。例如:
$("div").hide(2000,function(){alert("我隐藏好了")});

实例代码:
<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>hide()函数-三水点靠木</title> 

<style type="text/css">

div{

  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>

  <div class="first"></div>

  <div class="second"></div>

  <button id="first">瞬间隐藏</button>

  <button id="second">优雅的隐藏</button>

</body>

</html>

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

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
jQuery知识点整理
Jan 30 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
vant实现购物车功能
Jun 29 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 #Javascript
jQuery的css()方法用法实例
Dec 24 #Javascript
使用javascript获取页面名称
Dec 23 #Javascript
jQuery类选择器用法实例
Dec 23 #Javascript
基于JQuery制作可编辑的表格特效
Dec 23 #Javascript
JavaScript调试工具汇总
Dec 23 #Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 #Javascript
You might like
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
thinkphp分页集成实例
2017/07/24 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
语义化 H1 标签
2008/01/14 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python Pillow Image Invert
2019/01/22 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
商业企业管理专业求职信
2014/07/10 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
自查自纠整改报告
2014/11/06 职场文书
施工安全保证书
2015/05/09 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
pytorch 如何使用batch训练lstm网络
2021/05/28 Python