jQuery1.5.1 animate method source code reading_jquery

Copy code The code is as follows:

/*7536-7646*/
animate: function( prop, speed, easing, callback) {
if ( jQuery.isEmptyObject( prop ) ) {
return this.each( optall.complete );
}
//#7864 line this.options.complete.call( this.elem ) allows it to continuously execute animations, such as $('selector').animate({prop1 },speed1).animate({prop2},speed2) such animation queue;
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;
//The prop to perform animation, prop is generally a plainObj, in the form of {key1: value1,key2:value2};
for ( p in prop ) {
//Helping in camel case, some properties such as magrin-top need to be changed into camel case and become marginTop; see cameCase method;
var name = jQuery.camelCase( p );
//fix attribute; mainly the previous camelcase attribute;
if ( p !== name ) {
prop[ name ] = prop[ p ];
delete prop[ p ];
p = name;
}
//If you execute $(..).show||$(..).hide; if the element itself is hidden, and If you write hide in the animation, just run the callbacks directly;
if ( prop[p] === "hide" && hidden || prop[p] === "show" && !hidden ) {
return opt.complete.call(this);
}
//If prop[key]==(height||width) and is a dom element; some special processing is required;
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;
}
}
}
}
//if prop[key] Is an array; only use the first value 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 ) {
//If the overflow of the animated element has been set, temporarily set it to hidden;
this.style.overflow = "hidden ";
}
//The current animation key-value pair is actually prop;
opt.curAnim = jQuery.extend({}, prop);
//This is the core of animation , process each prop[key];
jQuery.each( prop, function( name, val ) {
//Get an Fx object; each parameter passed in is set to this object Attribute; where self refers to the animation element itself; opt is the object generated previously;
var e = new jQuery.fx( self, opt, name );
//When performing the show||hide operation prop ==fxAttrs (see show||hide method)
if ( rfxtypes.test(val) ) {
e[ val === "toggle" ? hidden ? "show" : "hide" : val ]( prop );
} else {
var parts = rfxnum.exec(val),
//start saves the initial value, which may be in style or css, if the value == null , undefiend, auto, 0, etc. will be set to 0;
start = e.cur();
if ( parts ) {
//end refers to the size of the change, such as: {left: -=66px}, then end=66;
var end = parseFloat( parts[2] ),
//The unit operator is px, %; if it is something that cannot have a unit, such as z-index , set to empty, otherwise set to px;
unit = parts[3] || ( jQuery.cssNumber[ name ] ? "" : "px" );
// We need to compute starting value
//If it is not px, such as %, em, etc.;
if ( unit !== "px" ) {
//Set the attribute value name to (end || 1) unit, if end =0; set to 1; the start value is set to start = ((end || 1) / e.cur()) * start;
jQuery.style( self, name, (end || 1) unit) ;
//Here e.cur() is different from the previous start = e.cur(); because the execution of jQuery.style(self, name, (end || 1) unit) causes start to be Change; used to handle the case of end=0; because e.cur(), as a divisor, cannot be 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 is accordingly set to the variable value after the operation;
end = ((parts[1] === "-=" ? -1 : 1) * end) start;
}
e.custom( start, end, unit );
//If there is no digital operation; then the only thing not passed in is '';
} else {
e.custom( start , val, "" );
}
}
});

// For JS strict compliance
return true;
});
},