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 相关文章推荐
ScrollDown的基本操作示例
Jun 09 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JsRender实用入门教程
Oct 31 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 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抽象工厂模式(Elgg)
2010/03/21 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
学习YUI.Ext第五日--做拖放Darg&Drop
2007/03/10 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python最长回文串算法
2018/06/04 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python异步存储数据详解
2019/03/19 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
满月酒答谢词
2014/01/14 职场文书
工作分析计划书
2014/04/30 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
教师继续教育反思周记
2015/06/25 职场文书