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图片滚动图片的效果(另类实现)
Jun 02 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
Python中字符串对齐方法介绍
2015/05/21 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python常用特殊方法实例总结
2019/03/22 Python
利用python实现AR教程
2019/11/20 Python
python游戏开发的五个案例分享
2020/03/09 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
python与js主要区别点总结
2020/09/13 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
挂靠协议书范本
2014/04/22 职场文书
安全承诺书格式
2014/05/21 职场文书
社区维稳工作方案
2014/06/06 职场文书
高中生毕业评语
2014/12/30 职场文书
大学生入党群众意见书
2015/06/02 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL