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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
php绘制一条弧线的方法
2015/01/24 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
js 对象是否存在判断
2009/07/15 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
微信小程序如何获取地址
2019/12/24 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python 定义只读属性的实现方式
2020/03/05 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
PHP笔试题
2012/02/22 面试题
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
二年级数学教学反思
2014/01/21 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
合伙经营协议书
2014/04/18 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
工程资料员岗位职责
2015/04/13 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle