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 相关文章推荐
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
jquery JSON的解析方式
2009/07/25 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
提升Python程序运行效率的6个方法
2015/03/31 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python实现线程池代码分享
2015/06/21 Python
python3抓取中文网页的方法
2015/07/28 Python
Python获取当前路径实现代码
2017/05/08 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
浅析python内置模块collections
2019/11/15 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
省三好学生申请材料
2014/01/22 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
教师对学生的评语
2014/04/28 职场文书
校园文明倡议书
2014/05/16 职场文书
工商管理专业自荐信
2014/06/03 职场文书
应届生求职信范文
2014/06/30 职场文书
学雷锋的心得体会
2014/09/04 职场文书
科技活动总结范文
2015/05/11 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL