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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
几种响应式文字详解
May 19 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
《生命 生命》教学反思
2014/04/19 职场文书
专项法律服务方案
2014/06/11 职场文书
最美家庭活动方案
2014/08/31 职场文书
农行心得体会
2014/09/02 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL