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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
jQuery实现查看图片功能
Dec 01 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 $_FILES函数详解
2011/03/09 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
PHP递归算法的简单实例
2019/02/28 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python3中property使用方法详解
2019/04/23 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
Python实现图像的垂直投影示例
2020/01/17 Python
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
销售经理工作职责范文
2013/12/03 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
外联部演讲稿
2014/05/24 职场文书
公司周年庆典标语
2014/10/07 职场文书
教师个人总结范文
2015/02/11 职场文书
项目负责人岗位职责
2015/02/15 职场文书
医院见习总结
2015/06/24 职场文书