jQuery 动画 _animate() 方法
一、jQuery animate() 方法用于创建自定义动画。
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("div").animate({ top:'500px'/*css样式里加上display:block和首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。*/ }); }); </script> </head> <body> <div style="height:100px; width:200px; border:2px solid #0F0; position:relative; background:red; display:block"></div> </body>
默认地,所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
二、jQuery animate() - 操作多个属性
生成动画的过程中可同时使用多个属性:
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px', fontSize:'30px' }); }); </script> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div> </body>
几乎所有的css属性都可以设置不过,需要记住的是当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
三、jQuery animate() - 使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'+=100px',/*可以使用这种方法给其设置值*/ width:'+=150px', fontSize:'+=30px' }); }); </script> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div> </body>
四、jQuery animate() - 使用预定义的值
可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("div").animate({ height:'toggle' }); }); </script> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div> </body>
五、jQuery animate() - 使用队列功能
如果在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ var div=$("div"); div.animate({left:'400px',opacity:'0.5',height:'+=500px',width:'+=550px',fontSize:'+=100px'},'show'); div.animate({left:'100px',opacity:'0.5',height:'100px',width:'150px',fontSize:'20px'},'show'); div.animate({left:'400px',opacity:'0.5',height:'+=700px',width:'+=750px',fontSize:'+=120px'},'show'); div.animate({left:'100px',opacity:'0.5',height:'100px',width:'150px',fontSize:'20px'},'show'); }); </script> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div> </body>
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ var div=$("div"); div.animate({left:'400px',opacity:'0.5',height:'+=100px',width:'+=150px'},'show'); div.animate({fontSize:'3em'},'show'); }); </script> </head> <body> <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div> </body>
jQuery 动画 _animate() 方法的更多相关文章
- jQuery动画animate方法使用介绍
用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...
- jquery 动画总结(主要指效果函数)
动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...
- Jquery动画方法 jquery.animate()
目前在学习Oracle数据库,由于刚接触,学校让练习练习HTML内容,就想起了老师以前提起过的animate方法 animate是jquery的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所 ...
- JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...
- jQuery动画方法
下面介绍一些使用jQuery实现动画的方法: html中有如下代码: <button id="btn-box1">show</button> <but ...
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- 深入学习jQuery动画队列
前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...
- jquery动画,基础以及我发现的新大陆
$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
随机推荐
- 1051: [HAOI2006]受欢迎的牛
1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2276 Solved: 1190[Submit][Sta ...
- 在JavaScript中判断整型的N种方法
原文:http://www.cnblogs.com/YcYYcY/p/3759184.html 整数类型(Integer)在JavaScript经常会导致一些奇怪的问题.在ECMAScript的规范中 ...
- Apache CXF实现Web Service(1)——不借助重量级Web容器和Spring实现一个纯的JAX-WS web service
废话少说,先在Eclipse中新建一个Java Project (可以不是WTP的Dynamic Web Project) 选择Java Project 再看pom.xml 我们使用cxf 3.1.4 ...
- php弱类型
此处写ctf中遇到的==和md5值为0e**的应用. 数组和字符的=== ==
- java cookie
public static void AddCookie(HttpServletResponse response, String key, String value) { Cookie cookie ...
- VS2010中打开VS2013/VS2012项目
VS2010中打开VS2013/VS2012项目 (2014-04-03 23:47:53) 转载▼ 分类: IT VS低版本打开高版本创建的项目时会提示"选择的文件是解决方案文件,但是 ...
- fuel openstack 在 VirtualBox 上的部署
搞了两天,终于搞好了.说说过程: 一开始用的6.1版本的Fuel.iso,按照国内外的教程装了几遍,但是网路验证始终不能通过.自己又不是很懂网络.后来在网上看到说6.1版的需要fuel-master连 ...
- 李洪强iOS开发之【Objective-C】07-自定义构造方法和description方法
知识回顾 在前面已经介绍了如何定义类和创建并初始化对象,比如有Student这个类 1.Student.h 1 #import <Foundation/Foundation.h> 2 3 ...
- mybatis 打印日志log4j.properties
log4j.rootLogger=DEBUG, Console #Console log4j.appender.Console=org.apache.log4j.ConsoleAppender log ...
- Linux下Boost交叉编译
http://davidlwq.iteye.com/blog/1580752 运行环境:ubuntu 12.04, boost 1.50.0 由于要把boost移植到arm板上去,所以折腾了一下,后来 ...