.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. HDOJ/HDU 2700 Parity(奇偶判断~)

    Problem Description A bit string has odd parity if the number of 1's is odd. A bit string has even p ...

  2. 大牛博客!Spark / Hadoop / Kafka / HBase / Storm

    在这里,非常感谢下面的著名大牛们,一路的帮助和学习,给予了我很大的动力! 有了Hadoop,再次有了Spark,一次又一次,一晚又一晚的努力相伴! HBase简介(很好的梳理资料) 1. 博客主页:h ...

  3. flexpaper 背景色变化

    1.mxml文件头部:添加 backgroundAlpha="0" <s:Application xmlns:fx="http://ns.adobe.com/mxm ...

  4. Segments - POJ 3304 (判断直线与线段是否相交)

    题目大意:给出一些线段,然后判断这些线段的投影是否有可能存在一个公共点.   分析:如果这些线段的投影存在一个公共点,那么过这个公共点作垂线一定与所有的直线都想交,于是题目转化成是否存在一个直线可以经 ...

  5. Node.js学习(10)----文件系统fs

    fs 模块是文件操作的封装,它提供了文件的读取.写入.更名.删除.遍历目录.链接等 POSIX 文件系统操作.与其他模块不同的是,fs 模块中所有的操作都提供了异步的和同步的两个版本, 例如读取文件内 ...

  6. 【Android - 进阶】之图片三级缓存的原理及实现

    在Android开发中,如果图片过多,而我们又没有对图片进行有效的缓存,就很容易导致OOM(Out Of Memory)错误.因此,图片的缓存是非常重要的,尤其是对图片非常多的应用.现在很多框架都做了 ...

  7. 关于封装unity3d的dll时候的进一步总结

    在进行新项目的开发或者接手.后期维护其他一些项目时,经常性的,我们会遇到以下情况: 1.使用新的插件替换已有的bug比较多或者不在维护的插件: 2.因策划需求或美术资源的变更,而不得不更换游戏中的游戏 ...

  8. 『零行代码』解决键盘遮挡问题(iOS)

    关注仓库,及时获得更新:iOS-Source-Code-Analyze https://github.com/draveness/iOS-Source-Code-Analyze Follow: Dra ...

  9. json-lib-2.4-jdk15.jar maven

    最近自己将一个web项目装换到使用mevan自动管理. 遇到了一个json包导入的问题.最终解决如下: <!-- https://mvnrepository.com/artifact/net.s ...

  10. CentOS6安装配置rsh

    基本信息:节点一:ip:192.168.8.166 主机名:hadrtest01节点二:ip:192.168.8.250 主机名:hadrtest02 1.两节点分别安装rsh,rsh-server包 ...