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 function、指针及内置对象
Feb 19 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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/03/20 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
BootStrap入门学习第一篇
2017/08/28 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
物流仓储计划书
2014/01/10 职场文书
集体婚礼证婚词
2014/01/13 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript