jQuery1.5.1 animate方法源码阅读
2024-05-06 14:25:01
供稿：网友
代码如下:
/*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]进行处理；
