学习记录jQuery的animate函数，jqueryanimate函数_H5之家

学习记录jQuery的animate函数，jqueryanimate函数

很久之前就对jQuery animate的实现非常感兴趣，不过前段时间很忙，直到前几天端午假期才有时间去研究。

jQuery.animate的每种动画过渡效果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数：

easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}

从参数名隐约可以推测出firstNum是初始值。要是你的数学学得比较好，你可以发现linear函数是直线方程；要是你的物理学得比较好，你可以发现它是匀速运动的位移方程（我数学和物理都没学好，是别人提醒我的……）。那么diff和p就是速度和时间了。

再看看jQuery.animate的原型：

animate: function( prop, speed, easing, callback )

各参数的说明如下：

元素的当前样式值（firstNum）可以获取，动画时长（p）就是duration，最终样式值是prop。理论上说，动画速度（diff）是可以算出来的。但是这又必然需要另一个函数进行运算。这样做明显是不明智的。再看看调用easing函数的相关代码（位于jQuery.fx.prototype.step中）：

var t = now()；
...
var n = t - this.startTime;
this.state = n / this.options.duration;
...
this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);

可以发现，p参数的值也就是this.state的值，从上下文得知它实际上是动画的时间进度。而firstNum和diff的参数值都是写死的，分别是0和1。这下easing函数的秘密完全被解开，p、firstNum、diff都是百分率而非实际数值，easing函数的返回值也就是位移的进度。diff的值是1，也就是以1倍的速度运行动画。算出位移进度后，通过“初始值+（最终值-初始值）×进度”就可以算出当前位移值：

this.now = this.start + ((this.end - this.start) * this.pos);

通过setInterval每隔一定时间（jQuery中是13ms）进行一次位移运算，直到当前时间与初始时间的差值大于动画时长，这就是jQuery.animate的执行过程。

按照常规思路，动画的实现方式是这样的：通过setInterval每隔一定时间给某个值增加特定数值，直到这个值达到限制值。这样做的主要问题是，不同浏览器的运行速度不同，从而导致动画速度有差异，一般是IE下比较慢，Firefox下比较快。而jQuery.animate是以当前时间来决定位移值，某个时刻的位移值总是固定的，因而动画速度不会有差异。

jquery animate（）函数的执行

使用:not(:animated)筛选
$(".next").click(function(){
$("....(原来的筛选):not(:animated)")......(执行的动作)
})

举例：
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

jquery的animate动画的回调函数怎带参数？

animate(params,options)
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

返回值
jQuery

参数
params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合

options (Options) : 一组包含动画选项的值的集合。

选项
duration (String,Number) : (默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (String) : (默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

complete (Function) : 在动画完成时执行的函数

step (Callback) : Template:APICallback

queue (Boolean) : (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

示例
第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体，一旦字体改变完毕后，边框的动画才开始。

第二个按钮按了之后就是一个传统的链式动画，即等前一个动画完成后，后一个动画才会开始.

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 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { bor......余下全文>>