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 相关文章推荐
JavaScript的eval JSON object问题
Nov 15 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
js实现右键菜单功能
Nov 28 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
微信小程序实现文字跑马灯
May 26 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
创建、调用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&amp;MYSQL服务器配置说明
2006/10/09 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python绘制地震散点图
2019/06/18 Python
Python更新所有已安装包的操作
2020/02/13 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
农村婚礼证婚词
2014/01/08 职场文书
银行办理业务介绍信
2014/01/18 职场文书
电力培训心得体会
2014/09/02 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
文明单位申报材料
2014/12/23 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python