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 相关文章推荐
jQuery 浮动广告实现代码
Dec 25 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 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实现网站插件机制的方法
2009/11/10 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
PHP strripos函数用法总结
2019/02/11 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
Python yield 使用浅析
2015/05/28 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
python中threading开启关闭线程操作
2020/05/02 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
运动会四百米广播稿
2014/01/19 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
鲁冰花观后感
2015/06/10 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
python绘制箱型图
2021/04/27 Python
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
基于Python实现股票收益率分析
2022/04/02 Python