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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
javascript简易画板开发
Apr 12 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 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
php class类的用法详细总结
2013/10/17 PHP
php删除指定目录的方法
2015/04/03 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
培养自己的php编码规范
2015/09/28 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
深入探究node之Transform
2017/07/20 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
区分python中的进程与线程
2020/08/13 Python
Python模块常用四种安装方式
2020/10/20 Python
什么是索引指示器
2012/08/20 面试题
工作交流会欢迎词
2014/01/12 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
运动会入场口号
2014/06/07 职场文书
教师岗位职责范本
2015/04/02 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
小组组名及励志口号
2015/12/24 职场文书