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 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
JS继承用法实例分析
Feb 05 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
jquery插件格式实例分析
Jun 16 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
JavaScript中继承原理与用法实例入门
May 09 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中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
python保存字符串到文件的方法
2015/07/01 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python安装requests库的实例代码
2019/06/25 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
十八大报告观后感
2014/01/28 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
运动会通讯稿600字
2015/07/20 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS