jquery animate 动画效果使用说明


Posted in Javascript onNovember 04, 2009

animate( params, [duration], [easing], [callback] )
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。
jQuery 1.3中,如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
点击按钮后div元素的几个不同属性一同变化:

// 在一个动画中同时应用三种类型的效果 
$("#go").click(function(){ 
$("#block").animate({ 
width: "90%", 
height: "100%", 
fontSize: "10em", 
borderWidth: 10 
}, 1000 ); 
}); 
animate( params, options )

用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。
第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始:
$("#go1").click(function(){ $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $("#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); });

stop( [clearQueue], [gotoEnd] )
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行
clearQueue(Boolean):如果设置成true,则清空队列。可以立即结束动画。
gotoEnd (Boolean):让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。
点击Go之后开始动画,点Stop之后会在当前位置停下来:
// 开始动画 $("#go").click(function(){ $(".block").animate({left: '+200px'}, 5000); }); // 当点击按钮后停止动画 $("#stop").click(function(){ $(".block").stop(); });
Javascript 相关文章推荐
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
vue.js开发环境搭建教程
May 04 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
什么是SOLID
Mar 24 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 #Javascript
javascript 限制输入脚本大全
Nov 03 #Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 #Javascript
基于JQuery框架的AJAX实例代码
Nov 03 #Javascript
Jquery AJAX 框架的使用方法
Nov 03 #Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 #Javascript
jQuery get和post 方法传值注意事项
Nov 03 #Javascript
You might like
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
php操作access数据库的方法详解
2017/02/22 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
深入理解Django中内置的用户认证
2017/10/06 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
澳大利亚百货公司:David Jones
2018/02/08 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
主持人演讲稿范文
2013/12/28 职场文书
单位授权委托书范文
2014/08/02 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
休学证明范本
2015/06/19 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android