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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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基础知识:类与对象(1)
2006/12/13 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
Python常用列表数据结构小结
2014/08/06 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
在python里面运用多继承方法详解
2019/07/01 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python多线程获取返回值代码实例
2020/02/17 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
python各种excel写入方式的速度对比
2020/11/10 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
会计顶岗实习心得
2014/01/25 职场文书
税务干部鉴定材料
2014/02/11 职场文书
企业人事任命书
2014/06/05 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
python实现股票历史数据可视化分析案例
2021/06/10 Python