jQuery animate函数动画过渡效果简介
本文导语: jQuery animate函数动画过渡效果 本节为朋友们介绍jquery animate函数的用法，一起来看看。 jQuery.animate的每种动画过渡效果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数： 代码示例: easing: { linear: function( p, n, ...
jQuery animate函数动画过渡效果
本节为朋友们介绍jquery animate函数的用法，一起来看看。
jQuery.animate的每种动画过渡效果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数：
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 )
各参数的说明：
prop：一组包含作为动画属性和终值的样式属性和及其值的集合。
speed：动画时长。
easing：要使用的擦除效果的名称。
callback：动画完成时执行的函数。
元素的当前样式值（firstNum）可以获取，动画时长（p）就是duration，最终样式值是prop。理论上说，动画速度（diff）是可以算出来的。但是这又必然需要另一个函数进行运算。这样做明显是不明智的。再看看调用easing函数的相关代码（位于jQuery.fx.prototype.step中）：
...
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倍的速度运行动画。（www. 脚本学堂）
算出位移进度后，通过“初始值+（最终值-初始值）×进度”就可以算出当前位移值：
通过setInterval每隔一定时间（jQuery中是13ms）进行一次位移运算，直到当前时间与初始时间的差值大于动画时长，这就是jQuery.animate的执行过程。
按照常规思路，动画的实现方式是这样的：
通过setInterval每隔一定时间给某个值增加特定数值，直到这个值达到限制值。
问题在于，不同浏览器的运行速度不同，从而导致动画速度有差异，一般是IE下比较慢，Firefox下比较快。
而jQuery.animate是以当前时间来决定位移值，某个时刻的位移值总是固定的，因而动画速度不会有差异。
- jquery animate实现动态显示与隐藏效果
- jquery animate实现图片轮换
- jquery animate实现DIV变化或左右移动
- jquery animate动画函数用法举例
- js模拟jquery的animate自定义动画效果
- jquery1.5.1 animate方法(详细注释)
- jQuery动画animate方法实例分享
- jquery animate动画函数用法浅析
- jQuery animate方法定位页面具体位置(示例)
- jquery animate动画方法使用介绍
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。