.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动画的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. 解决animate动画连续播放bug

    在animate动画中,如果几个div之间频繁切换,会导致鼠标移开后,动画仍在继续,解决方法有两个 一个,判断当前是否在运行动画: if(!$(".block").is(" ...

  3. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  4. jquery IE6 下animate 动画的opacity无效

    jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~

  5. svg的animate动画动态加载删除遇到删除animate后再次加载的animate动画没有效果问题

    svg上有多个圆圈,当选中特定圆圈后给其加上animate动画效果,并把其他圆圈的animate效果去除. 第一次选择一个点实现动画效果完全达到效果,因为是第一次所以不需要把其他圆圈的animate子 ...

  6. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  7. jQuery animate动画 stop()方法详解~

    一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...

  8. jquery animate 动画效果使用说明

    animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性 ...

  9. Animate 动画

    angular 也提供了animate service 涉及 $animate,$animateProvider 1.2办法后通过 angular-animate.js 还扩展了一些功能 先来说说大致 ...

随机推荐

  1. c++函数模板声明与定义相分离

    最近在仿写stl,发现stl源码中将模板的声明与定义写在一起实在很不优雅.自己尝试用“传统”方法,及在.h文件里声明,在.cpp文件里定义,然后在main函数里包含.h头文件,这样会报链接错误.这是因 ...

  2. 【转】关于android的输入法弹出来 覆盖输入框的有关问题

    今天发现一个问题,在录入信息页面.信息不多,但是输入法弹起后,内容已经超出页面,无滚动条,很不方便. 解决办法:在配置文件中,页面对应的Activity中添加 <activity android ...

  3. 高性能、高流量Java Web站点打造的22条建议

    @http://www.csdn.net/article/2013-12-20/2817861-22-recommendations-for-building-effective-high-traff ...

  4. jump_ur.php通知模板

    <title>出错啦~~~</title> <script language="javascript" type="text/javascr ...

  5. HTTPClient实现java自动登录人人网

    参考网址: https://passport.csdn.net/account/login  http://www.iteye.com/topic/638206 httpClient http://b ...

  6. The Arduino IDE(compiler)'s float bug

    1.通常直接使用串口的print函数就ok Serial.println(DHT.humidity);  //assuming DHT.humidity is float 2.但是习惯问题,还是偏好s ...

  7. 自定义的插件如何加载到Qt Designer中(详细)

    要想在Qt Designer中使用自定义控件,必须要使Qt Designer能够知道我们的自定义控件的存在.有两种方法可以把新自定义控件的信息通知给Qt Designer:“升级(promotion) ...

  8. curl post参数,接口接收不到数据问题

    今天遇到一个问题,注册下发短信失败,总提示无法发送注册短信,请从新发送. 经检查,curl里面将post数据以json_encode的方法转码之后传递,而且各选项设置感觉没有问题,怎么接口就接收不到p ...

  9. 通过SSHFS在RHEL中安全的挂载远程Linux/UNIX目录或文件系统--转载

    You can easily mount remote server file system or your own home directory using special sshfs and fu ...

  10. JS的事件监听机制

    很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套 ...