jQuery1.5.1 animate方法源码阅读


Posted in Javascript onApril 05, 2011
/*7536-7646*/ 
animate: function( prop, speed, easing, callback ) { 
if ( jQuery.isEmptyObject( prop ) ) { 
return this.each( optall.complete ); 
} 
//#7864行this.options.complete.call( this.elem )使得其可以不断的连续执行动画,比如$(‘selector').animate({prop1},speed1).animate({prop2},speed2)这样的动画队列; 
return this[ optall.queue === false ? "each" : "queue" ](function() { 
// XXX 'this' does not always have a nodeName when running the 
// test suite 
var opt = jQuery.extend({}, optall), p, 
isElement = this.nodeType === 1, 
hidden = isElement && jQuery(this).is(":hidden"), 
self = this; 
//要执行动画的prop,prop一般是一个plainObj,形如{key1:value1,key2:value2}; 
for ( p in prop ) { 
//驼峰改写,有些比如magrin-top需要变成驼峰的属性即变成marginTop;见cameCase方法; 
var name = jQuery.camelCase( p ); 
//fix属性;主要是前面camelcase的属性; 
if ( p !== name ) { 
prop[ name ] = prop[ p ]; 
delete prop[ p ]; 
p = name; 
} 
//如果执行$(..).show||$(..).hide;如果这个元素本身是hidden,而动画里面又写hide,直接运行callbacks就可以了; 
if ( prop[p] === "hide" && hidden || prop[p] === "show" && !hidden ) { 
return opt.complete.call(this); 
} 
//如果prop[key]==(height||width)并且是一个dom元素;需要有些特殊的处理; 
if ( isElement && ( p === "height" || p === "width" ) ) { 
// Make sure that nothing sneaks out 
// Record all 3 overflow attributes because IE does not 
// change the overflow attribute when overflowX and 
// overflowY are set to the same value 
opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ]; // Set display property to inline-block for height/width 
// animations on inline elements that are having width/height 
// animated 
if ( jQuery.css( this, "display" ) === "inline" && 
jQuery.css( this, "float" ) === "none" ) { 
if ( !jQuery.support.inlineBlockNeedsLayout ) { 
this.style.display = "inline-block"; 
} else { 
var display = defaultDisplay(this.nodeName); 
// inline-level elements accept inline-block; 
// block-level elements need to be inline with layout 
if ( display === "inline" ) { 
this.style.display = "inline-block"; 
} else { 
this.style.display = "inline"; 
this.style.zoom = 1; 
} 
} 
} 
} 
//如果prop[key]是一个数组;只用第一个值prop[p][0]; 
if ( jQuery.isArray( prop[p] ) ) { 
// Create (if needed) and add to specialEasing 
(opt.specialEasing = opt.specialEasing || {})[p] = prop[p][1]; 
prop[p] = prop[p][0]; 
} 
} 
if ( opt.overflow != null ) { 
//如果动画元素的overflow已经被设置的情况下,把它暂时为hidden; 
this.style.overflow = "hidden"; 
} 
//当前动画键值对,其实就是prop; 
opt.curAnim = jQuery.extend({}, prop); 
//这里便是动画的核心了,对每一个prop[key]进行处理; 
jQuery.each( prop, function( name, val ) { 
//获取一个Fx对象;传入的每一个参数都被设置成为这个对象的属性;其中self是指动画元素自身;opt是前面产生的对象; 
var e = new jQuery.fx( self, opt, name ); 
//当执行show||hide操作的时候prop==fxAttrs(参见show||hide方法) 
if ( rfxtypes.test(val) ) { 
e[ val === "toggle" ? hidden ? "show" : "hide" : val ]( prop ); 
} else { 
var parts = rfxnum.exec(val), 
//start保存了初始值,它可能在style,也可能在css中,如果该值==null,undefiend,auto,0等将被设置为0; 
start = e.cur(); 
if ( parts ) { 
//end是指变化量的大小,比如:{left:-=66px},那么end=66; 
var end = parseFloat( parts[2] ), 
//单元运算符,就是px,%;如果是一些不能带单位的,比如z-index,设置为空,否则就设置为px; 
unit = parts[3] || ( jQuery.cssNumber[ name ] ? "" : "px" ); 
// We need to compute starting value 
//如果不是px,比如%,em等等; 
if ( unit !== "px" ) { 
//设置该属性值name为(end || 1) + unit,如果end=0;设置为1;开始值被设置为start = ((end || 1) / e.cur()) * start; 
jQuery.style( self, name, (end || 1) + unit); 
//这里e.cur()和前面的start = e.cur();是不一样的,因为jQuery.style( self, name, (end || 1) + unit)的执行使得start被改变;用于处理end=0的情况;因为e.cur()作为除数,不能为0; 
start = ((end || 1) / e.cur()) * start; 
jQuery.style( self, name, start + unit); 
} 
// If a +=/-= token was provided, we're doing a relative animation 
if ( parts[1] ) { 
//end相应的被设置为运算后的变量值; 
end = ((parts[1] === "-=" ? -1 : 1) * end) + start; 
} 
e.custom( start, end, unit ); 
//如果没有数字化的运算;那么没传入的只能是''; 
} else { 
e.custom( start, val, "" ); 
} 
} 
}); 
// For JS strict compliance 
return true; 
}); 
},
Javascript 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
Vue表单实例代码
Sep 05 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
jQuery的运行机制和设计理念分析
Apr 05 #Javascript
jQuery JSON的解析方式分享
Apr 05 #Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 #Javascript
基于jquery的动态创建表格的插件
Apr 05 #Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 #Javascript
新鲜出炉的js tips提示效果
Apr 03 #Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 #Javascript
You might like
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
Python中的index()方法使用教程
2015/05/18 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Django中的Signal代码详解
2018/02/05 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
使用Python发现隐藏的wifi
2020/03/04 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Python requests模块session代码实例
2020/04/14 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
如何在存储过程中使用Loop
2016/01/05 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
成教毕业生自我鉴定
2013/10/23 职场文书
生日邀请函范文
2014/01/13 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
ICOM R71E和R72E图文对比解说
2022/04/07 无线电