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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 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实现加减法验证码代码
2014/02/14 PHP
php中序列化与反序列化详解
2017/02/13 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
司机岗位职责
2013/11/15 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
我的祖国演讲稿
2014/05/04 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript