jQuery隐藏和显示效果实现


Posted in Javascript onApril 06, 2016

实例

jQuery hide()

简单的jQuery hide()方法演示。

jQuery hide()

另一个hide()实例。演示如何隐藏文本。

jQuery hide() 和 show()

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

实例

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

语法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法:

实例

$("button").click(function(){
$("p").hide(1000);
});

jQuery toggle()

通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素,并隐藏已显示的元素:

实例

$("button").click(function(){
$("p").toggle();
});

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

Javascript 相关文章推荐
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
Angular5.1新功能分享
Dec 21 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
JS动态改变浏览器标题的方法
Apr 06 #Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 #Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 #Javascript
JS控制伪元素的方法汇总
Apr 06 #Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 #Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 #Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 #Javascript
You might like
header跳转和include包含问题详解
2012/09/08 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
php编写简单的文章发布程序
2015/06/18 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python端口扫描系统实现方法
2014/11/19 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
《骑牛比赛》教后反思
2014/04/22 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
董事长岗位职责
2015/02/13 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL