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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
layui分页效果实现代码
May 19 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
js实现开关灯效果
Mar 30 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 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 register_globals 值为on与off的理解
2013/09/26 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
如何在PHP中生成随机数
2020/06/04 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
JavaScript中数组去重的5种方法
2020/07/04 Javascript
在Django的视图中使用数据库查询的方法
2015/07/16 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
职代会闭幕词
2015/01/28 职场文书
母亲节感言
2015/08/03 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
MySQL如何构建数据表索引
2021/05/13 MySQL