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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
又一个php 分页类实现代码
2009/12/03 PHP
php 代码优化之经典示例
2011/03/24 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP分页类集锦
2014/11/18 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
vue.js中过滤器的使用教程
2017/06/08 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python基础教程之while循环
2019/08/14 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python pymsql模块的使用
2020/09/07 Python
python selenium 获取接口数据的实现
2020/12/07 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
static关键字的用法
2013/10/07 面试题
介绍一下Java中标识符的命名规则
2014/02/03 面试题
应届生程序员求职信
2013/11/05 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
党员个人承诺书
2015/04/27 职场文书
大学生暑假实习总结
2015/07/13 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
python实现简单反弹球游戏
2021/04/12 Python
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS