jQuery控制元素隐藏和显示


Posted in Javascript onMarch 03, 2017

1、jQuery隐藏和显示效果

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

$("#hide").click(function(){
 $("p").hide();
}); //点击id="hide"元素时,隐藏所有<p>标签内容;

$("#show").click(function(){
 $("p").show();
}); //点击id="show"元素时,显示所有<p>标签内容;

2、jQuery淡入淡出效果

通过 jQuery,您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法:

  1. fadeIn()
  2. fadeOut()
  3. fadeToggle()
  4. fadeTo()
//jQuery fadeIn() 用于淡入已隐藏的元素;
$(selector).fadeIn(speed,callback);
//speed(可选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选) 参数是 fading 完成后所执行的函数名称;
$("button").click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);
}); //点击<button>按钮时,不同效果的淡入id分别为"div1,div2,div3"的元素;
//jQuery fadeOut() 方法用于淡出可见元素;
$(selector).fadeOut(speed,callback);
//speed(可选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选) 参数是 fading 完成后所执行的函数名称;
$("button").click(function(){
 $("#div1").fadeOut();
 $("#div2").fadeOut("slow");
 $("#div3").fadeOut(3000);
}); //点击<button>按钮时,不同效果的淡出id分别为"div1,div2,div3"的元素;
//jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换;
//如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果;
//如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果;
$(selector).fadeToggle(speed,callback);
//speed(可选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选) 参数是 fading 完成后所执行的函数名称;
$("button").click(function(){
 $("#div1").fadeToggle();
 $("#div2").fadeToggle("slow");
 $("#div3").fadeToggle(3000);
}); //点击<button>按钮时,不同效果的淡出淡入id分别为"div1,div2,div3"的元素;
//jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间);
$(selector).fadeTo(speed,opacity,callback);
//speed(必选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
//opacity(必选)参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间);
//callback(可选) 参数是 fading 完成后所执行的函数名称;
$("button").click(function(){
 $("#div1").fadeTo("slow",0.15);
 $("#div2").fadeTo("slow",0.4);
 $("#div3").fadeTo("slow",0.7);
}); //点击<button>按钮时,以给出的不透明度淡入淡出id分别为"div1,div2,div3"的元素;

3、jQuery滑动效果

通过 jQuery,您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法:

  1. slideDown()
  2. slideUp()
  3. slideToggle()
//jQuery slideDown() 方法用于向下滑动元素;
$(selector).slideDown(speed,callback);
//speed(可选)参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选)参数是滑动完成后所执行的函数名称;
$("#flip").click(function(){
 $("#panel").slideDown();
}); //点击id为flip的元素时,将id为panel的元素向下滑动;
//jQuery slideUp() 方法用于向上滑动元素;
$(selector).slideUp(speed,callback);
//speed(可选)参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选)参数是滑动完成后所执行的函数名称;
$("#flip").click(function(){
 $("#panel").slideUp();
}); //点击id为flip的元素时,将id为panel的元素向上滑动;
//jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换;
//如果元素向下滑动,则 slideToggle() 可向上滑动它们;
//如果元素向上滑动,则 slideToggle() 可向下滑动它们;
$(selector).slideToggle(speed,callback);
//speed(可选)参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选)参数是滑动完成后所执行的函数名称;
$("#flip").click(function(){
 $("#panel").slideToggle();
}); //点击id为flip的元素时,将id为panel的元素向上或向下滑动;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 #Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 #Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 #Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 #Javascript
js实现二级导航功能
Mar 03 #Javascript
js实现简单的获取验证码按钮效果
Mar 03 #Javascript
jQuery获取Table某列的值(推荐)
Mar 03 #Javascript
You might like
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
jqueryUI tab标签页代码分享
2017/10/09 jQuery
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python实现自主查询实时天气
2018/06/22 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
厨师岗位职责
2013/11/12 职场文书
难忘的一课教学反思
2014/04/30 职场文书
幼儿教师求职信
2014/05/24 职场文书
小学英语课教学反思
2016/02/15 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript