jQuery学习笔记之jQuery的动画


Posted in Javascript onDecember 22, 2010

一.系统预定义的动画函数

1.显示隐藏函数
show(); //显示元素(同时增加宽、高、不透明度)
hide(); //隐藏元素
执行hide()隐藏界面元素,相当于将css样式中的display:none.

我们也可以在函数中加入参数,具体如下:
show("slow");
除了slow取值外,还可以设置为normal,fast,分别代表时间为600,400,200毫秒

我们也可以加如具体时间取值。具体如下:

slow(1000);
这样代表时间完全显示出元素的时间间隔为1000毫秒

2.不透明度函数
fadeIn();//逐渐显示元素(只增加不透明度)
fadeOut();//逐渐隐退元素

3.高宽度函数
slideDown();//逐渐增加元素高度(只增加元素高度)
slideUp();//逐渐缩短元素高度

二.自定义动画函数

animate(params,speed,callback);
params:取值为一个样式属性和取值的映射
speed:速度
callback:动画完成时的执行函数

其中params的样式属性取值可以是多个属性,也可以是累增,累减的取值
例子:

$(function(){ 
$(#id1).click(function(){ 
$(this).animate({left:"+=500px",height:"200px"},3000,function(){ 
$(this).css("border","5px solid blue") 
}) 
}) 
})

1.停止元素动画
stop();
结束当前执行的动画,并立即执行下面定义的动画

2.判断是否在动画状态
is(":animate")

3.其他动画函数
toggle(speed,callback);//立即切换元素状态(高,宽,不透明度),如果隐藏则切换到显示,如果显示则切换的隐藏
sildeToggle(speed,callback);//改变高度方式切换元素状态
fadeto(speed,opacity,callback);切换到指定的不透明度值

Javascript 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
小程序实现留言板
Nov 02 Javascript
JS闭包经典实例详解
Dec 20 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 #Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 #Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 #Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 #Javascript
jQuery学习笔记之Helloworld
Dec 22 #Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 #Javascript
一个轻量级的javascript库 pj介绍
Dec 19 #Javascript
You might like
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
python中sets模块的用法实例
2014/09/30 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
Python的历史与优缺点整理
2020/05/26 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
团日活动总结
2014/04/28 职场文书
校园安全标语
2014/06/07 职场文书
法人代表证明书
2014/09/18 职场文书
2014年维修工作总结
2014/11/22 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
Python中的pprint模块
2021/11/27 Python