资源描述：
《jquery191源码分析系列（十五)之动画处理_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、jQuery1.9.1源码分析系列（十五）之动画处理首先需要有队列（queue）的基本知识。见上一章。相关教程：jQuery卜•的动画处理总结：http://www.jb51.net/article/42000.htmjQuery1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween:http://www.jb51.net/article/75821.htma.动画入口jQuery.fn.animate函数执彳亍流程详解先根据参数调用jQuery.speed获取动画相关参数，得到一个类似如下的对象；并且生成动UUi执行函数doAnimationoptail={complet
2、e:fnction(){...},//动画执行完成的回调duration:400,//动画执行时长easing:"swing",//动厕效果queue:"fx",//动画队列old:false/fnction(){・・・},}varempty二jQuery.isEmptyObject(prop),optal1二jQuery.speed(speed,easing,callback),doAnimation二function(){〃在特征的副本上操作，保证每个特征效果不会被丢失varanim=Animation(this,jQuery.extend({},prop),optail);d
3、oAnimation.finish二function(){anim.stop(true);}；//空动画或完成需要立马解决if(empty
4、
5、jQuery._data(this,"finish")){anim.stop(true);}}；doAnimation・finish=doAnimation;没有动画正在执行则马上执行动画，否则将动画压入动画队列等待执行//没有动画在执行则马上执行动画，否则将动画压入动画队列等待执行returnempty
6、
7、optail.queue二二二false?this.each(doAnimation):this.queue(optail,queue,
8、doAnimation);可以看出,真正执行动画的地方是Animation(this,jQuery.extend({},prop),optail)函数b.jQuery内部函数Animation详解Animation(clem,properties,options)•propertics是要进行动画的css特征,options是动画相关选项{complete:function(){•••},duration:400,easing:undefined,old:false,queue:。首先，初始化一个延时对象，这个延时对象用来处理动画队列。deferred二jQucr)^.Deferr
9、ed().always(function(){//don'tmatcheleminthe:animatedselectordeletetick,elem;}),然后，生成一个每一个时间点(相邻两个时间点的事件间隔默认为13毫秒)上都会执行的函数tick,这个tick函数会保存在jQuery.timers中，然后每次执行jQuery.fx.tick的时候会取出来执行。tick二function(){if(stopped){returnfalse;}varcurrentTime=fxNow
10、
11、createFxNowO,remaining二Math,max(0,animation.sta
12、rtTime+animation,duration-currentTime),//archaiccrashbugwon'tallowustouse1-(0.5
13、
14、0)(#12497)temp=remaining/animation,duration
15、
16、0,percent=1-temp,index=0,length=animation.tweens.length;//执行动画效果for(;index17、ion,percent,remaining]);if(percent<1&&length){returnrcmaining;}else{〃动画执行完毕，执行所有延时队列中的函数(包描清除动画相关的数据)deferred,resolveWith(elem,[animation]);returnfalse;我们看到jQuery对动画进度的处理：remaining=Math,max(0,animation.startTime+animation.duration-currc
