jQuery控制元素显示、隐藏、切换、滑动的方法总结


Posted in Javascript onApril 16, 2015

jQuery 隐藏和显示

通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
实例

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
语法:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)

speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
实例
$("button").click(function(){

$("p").hide(1000);

});

callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

jQuery 滑动函数 - slideDown, slideUp, slideToggle

jQuery 拥有以下滑动函数:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例
$(".flip").click(function(){

$(".panel").slideDown();

});

jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

jQuery 自定义动画

jQuery 函数创建自定义动画的语法:

$(selector).animate({params},[duration],[easing],[callback])

关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是:"slow", "fast", "normal" 或毫秒。
实例
<script type="text/javascript">

$(document).ready(function(){

$("#start").click(function(){

$("#box").animate({height:300},"slow");

$("#box").animate({width:300},"slow");

$("#box").animate({height:100},"slow");

$("#box").animate({width:100},"slow");

});

});

</script>
函数 描述
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画
Javascript 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
js分页代码分享
Apr 28 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
jquery插件bxslider用法实例分析
Apr 16 #Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 #Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 #Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 #Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 #Javascript
jQuery Ajax使用实例
Apr 16 #Javascript
javascript等号运算符使用详解
Apr 16 #Javascript
You might like
php全角字符转换为半角函数
2014/02/07 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python中装饰器学习总结
2018/02/10 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python实现石头剪刀布程序
2021/01/20 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
Python二维码生成识别实例详解
2019/07/16 Python
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
学生自我鉴定
2013/12/18 职场文书
高一历史教学反思
2014/01/13 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
小学教师见习总结
2015/06/23 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS