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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
图解javascript作用域链
May 27 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
详解js闭包
2014/09/02 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
Javascript实现字数统计
2015/07/03 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
陈安之励志演讲稿
2014/08/21 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
业务员管理制度范本
2015/08/06 职场文书
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL