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 相关文章推荐
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
原生js实现自定义滚动条
Jan 20 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 数组入门教程小结
2009/05/20 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
Express的路由详解
2015/12/10 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
送给程序员的20个Java集合面试问题
2014/08/06 面试题
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
基于python实现银行管理系统
2021/04/20 Python