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 相关文章推荐
JS学习之一个简易的日历控件
Mar 24 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
jQuery中extend函数详解
Jul 13 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
JS高级技巧(简洁版)
Jul 29 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
详解webpack进阶之loader篇
2017/08/23 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Python的垃圾回收机制深入分析
2014/07/16 Python
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python制作简单的网页爬虫
2015/11/22 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
你应该知道的python列表去重方法
2017/01/17 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
教师对学生的寄语
2014/04/03 职场文书
排查整治工作方案
2014/06/09 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python