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 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
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做服务器和web前端的界面进行交互
2016/10/31 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
销售团队激励口号
2014/06/06 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
针对吵架老公保证书
2015/05/08 职场文书
单位综合评价意见
2015/06/05 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python