jQuery 隐藏/显示效果函数用法实例分析


Posted in jQuery onMay 20, 2020

本文实例讲述了jQuery 隐藏/显示效果函数用法。分享给大家供大家参考,具体如下:

jQuery 效果- 隐藏和显示

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);
});

下面的例子演示了带有 speed 参数的 hide() 方法,并使用回调函数:

$(document).ready(function(){
 $(".hidebtn").click(function(){
 $("div").hide(1000,"linear",function(){
  alert("Hide() 方法已完成!");
 });
 });
});
  • 第二个参数是一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件)。

jQuery toggle()

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

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

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

语法:

$(selector).toggle(speed,callback);
  • 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

对于可选的 callback 参数,有以下几点说明:

1.$(selector)选中的元素的个数为n个,则callback函数会执行n次;

2.callback函数名后加括号,会立刻执行函数体,而不是等到显示/隐藏完成后才执行;

3.callback既可以是函数名,也可以是匿名函数;

$(selector) 选中的元素的个数为 n 个,则 callback 函数会执行 n 次。

对于这里,当 callback 函数加上括号时,函数立即执行,只会调用一次, 如果不加括号,元素显示或隐藏后调用函数,才会调用多次。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

jQuery 相关文章推荐
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 #jQuery
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
You might like
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
从头学Python之编写可执行的.py文件
2017/11/28 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
python中如何设置代码自动提示
2020/07/15 Python
python如何控制进程或者线程的个数
2020/10/16 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
财政局个人年终总结
2015/03/03 职场文书
亮剑观后感500字
2015/06/05 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书