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 相关文章推荐
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
javascript模块化简单解析
Apr 07 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python一键升级所有pip package的方法
2017/01/16 Python
python实现AES加密与解密
2019/03/28 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
高级护理实习生自荐信
2013/09/28 职场文书
《乞巧》教学反思
2014/02/27 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
收银员岗位职责
2015/02/03 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
Android Rxjava3 使用场景详解
2022/04/07 Java/Android