.animate动画
.animate(params, [duration], [easing], [callback])
params: 结果样式属性
duration: 动画时长 也可以用 slow normal fast
easing: 默认jQuery提供"linear" 和 "swing"
callback: 在动画完成时执行的函数,直接写function(){}
animate(params, options)
options:
{queue:默认true,}如果设置false则会跳出队列,直接执行。
例子:
HTML 代码:
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代码:
$("#go1").click(function(){
$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) //脱离队列,会和fontSize一起执行
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
}); $("#go2").click(function(){
$("#block2").animate( { width: "90%"}, 1000 )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
点击按钮1: 宽度和字体大小同时动画,然后边框宽再执行。
点击按钮2: 三个动画按照顺序逐一执行。
结果样式参考:
styles |
可能的 CSS 样式值(提供实例):
注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。 |
.animate动画的更多相关文章
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- 解决animate动画连续播放bug
在animate动画中,如果几个div之间频繁切换,会导致鼠标移开后,动画仍在继续,解决方法有两个 一个,判断当前是否在运行动画: if(!$(".block").is(" ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- jquery IE6 下animate 动画的opacity无效
jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~
- svg的animate动画动态加载删除遇到删除animate后再次加载的animate动画没有效果问题
svg上有多个圆圈,当选中特定圆圈后给其加上animate动画效果,并把其他圆圈的animate效果去除. 第一次选择一个点实现动画效果完全达到效果,因为是第一次所以不需要把其他圆圈的animate子 ...
- jquery的animate({})动画整理
在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...
- jQuery animate动画 stop()方法详解~
一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...
- jquery animate 动画效果使用说明
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性 ...
- Animate 动画
angular 也提供了animate service 涉及 $animate,$animateProvider 1.2办法后通过 angular-animate.js 还扩展了一些功能 先来说说大致 ...
随机推荐
- c++函数模板声明与定义相分离
最近在仿写stl,发现stl源码中将模板的声明与定义写在一起实在很不优雅.自己尝试用“传统”方法,及在.h文件里声明,在.cpp文件里定义,然后在main函数里包含.h头文件,这样会报链接错误.这是因 ...
- 【转】关于android的输入法弹出来 覆盖输入框的有关问题
今天发现一个问题,在录入信息页面.信息不多,但是输入法弹起后,内容已经超出页面,无滚动条,很不方便. 解决办法:在配置文件中,页面对应的Activity中添加 <activity android ...
- 高性能、高流量Java Web站点打造的22条建议
@http://www.csdn.net/article/2013-12-20/2817861-22-recommendations-for-building-effective-high-traff ...
- jump_ur.php通知模板
<title>出错啦~~~</title> <script language="javascript" type="text/javascr ...
- HTTPClient实现java自动登录人人网
参考网址: https://passport.csdn.net/account/login http://www.iteye.com/topic/638206 httpClient http://b ...
- The Arduino IDE(compiler)'s float bug
1.通常直接使用串口的print函数就ok Serial.println(DHT.humidity); //assuming DHT.humidity is float 2.但是习惯问题,还是偏好s ...
- 自定义的插件如何加载到Qt Designer中(详细)
要想在Qt Designer中使用自定义控件,必须要使Qt Designer能够知道我们的自定义控件的存在.有两种方法可以把新自定义控件的信息通知给Qt Designer:“升级(promotion) ...
- curl post参数,接口接收不到数据问题
今天遇到一个问题,注册下发短信失败,总提示无法发送注册短信,请从新发送. 经检查,curl里面将post数据以json_encode的方法转码之后传递,而且各选项设置感觉没有问题,怎么接口就接收不到p ...
- 通过SSHFS在RHEL中安全的挂载远程Linux/UNIX目录或文件系统--转载
You can easily mount remote server file system or your own home directory using special sshfs and fu ...
- JS的事件监听机制
很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套 ...