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 相关文章推荐
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
js中作用域的实例解析
Mar 16 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
React组件生命周期详解
Jul 03 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
一个高ai的分页函数和一个url函数
2006/10/09 PHP
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
Python开发的实用计算器完整实例
2017/05/10 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python实现微信自动回复功能
2018/04/11 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
Python colormap库的安装和使用详情
2020/10/06 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
大学生在校表现评语
2014/12/31 职场文书
党校培训学习心得体会
2016/01/06 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers