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 相关文章推荐
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
JavaScript Array对象详解
Mar 01 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
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基础知识:控制结构
2006/12/13 PHP
php之XML转数组函数的详解
2013/06/07 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
mac系统安装Python3初体验
2018/01/02 Python
如何通过python画loss曲线的方法
2019/06/26 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Python用input输入列表的实例代码
2020/02/07 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
操行评语大全
2014/04/30 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
MySQL 数据类型详情
2021/11/11 MySQL
Python闭包的定义和使用方法
2022/04/11 Python