jQuery1.5.1 애니메이션 메서드 소스 코드 reading_jquery

코드 복사 코드는 다음과 같습니다.

/*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 )을 사용하면 $('selector').animate({prop1 }와 같은 애니메이션을 지속적으로 실행할 수 있습니다. ,speed1).animate({prop2},speed2) 이러한 애니메이션 큐;
return this[ optall.queue === false ? "each" : "queue" ](function() {
// XXX ' this'에는
// 테스트 모음
을 실행할 때 항상 nodeName이 있는 것은 아닙니다. var opt = jQuery.extend({}, optall), p,
isElement = this.nodeType === 1 ,
hidden = isElement && jQuery(this).is(":hidden"),
self = this;
//애니메이션을 수행하는 prop인 prop은 일반적으로 {key1: value1,key2:value2};
for ( p in prop ) {
//magrin-top과 같은 일부 속성을 Camel Case로 변경하고 marginTop으로 변경해야 합니다.
var name = jQuery.camelCase( p );
//fix 속성; 주로 이전 camelcase 속성
if ( p !== name ) {
prop[ name ] = prop[ p ] ;
delete prop[ p ];
p = name;
}
//$(..).show||$(..).hide를 실행하는 경우; 은 숨겨져 있으며, 애니메이션에 hide라고 쓰면 콜백을 직접 실행하면 됩니다.
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" ) ) {
// 몰래 빠져나가는 것이 없는지 확인하세요
// IE는 오버플로 속성 3개를 모두 기록합니다.
/ /overflowX와
//overflowY가 동일한 값으로 설정된 경우 오버플로 속성을 변경합니다.
opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];

// 높이/너비에 대한 표시 속성을 인라인 블록으로 설정
// 너비/높이가 있는 인라인 요소의 애니메이션
// 애니메이션
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)

// 인라인 수준 요소는 인라인을 허용합니다. block;
// 블록 수준 요소는 레이아웃과 인라인이어야 합니다.
if ( display === "inline" ) {
this.style.display = "inline-block"

} else {
this.style.display = "inline";
this.style.zoom = 1
}
}
}
}
// if prop[key]가 배열입니다. 첫 번째 값만 사용하세요. prop[p][0];
if ( jQuery.isArray( prop[p] ) ) {
// 생성(필요한 경우) 및 추가 특수Easing
(opt.specialEasing = opt.specialEasing || {})[p] = prop[p][1]
prop[p] = prop[p][0]
}
}

if ( opt.overflow != null ) {
//애니메이션 요소의 오버플로가 설정된 경우 일시적으로 숨김으로 설정하세요.
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 값 == null , undefiend, auto, 0인 경우 스타일이나 CSS에 있을 수 있는 초기 값을 저장합니다. 등은 0으로 설정됩니다.
start = e.cur();
if ( parts ) {
//end는 다음과 같이 변경 크기를 나타냅니다. }, then end=66;
var end = parsFloat( parts[2] ),
//단위 연산자는 px, %; 비어 있게 설정하고, 그렇지 않으면 px로 설정합니다.
unit = parts[3] || ( jQuery.cssNumber[ name ] ? "" : "px"
// 시작 값을 계산해야 합니다
//%, em 등 px가 아닌 경우
if (unit !== "px" ) {
//속성값 이름을 (end || 1) 단위로 설정하고, end =0; 1로 설정되면 시작 값은 start = ((end || 1) / e.cur()) * start
jQuery.style( self, name, (end || 1) ) 단위) ;//여기서 e.cur()는 이전 start = e.cur()와 다릅니다. jQuery.style(self, name, (end || 1) unit)을 실행하면 시작이 발생하기 때문입니다. 변경; e.cur()는 제수로서 0이 될 수 없으므로 end=0인 경우를 처리하는 데 사용됩니다.
start = ((end || 1) / e.cur()) * start ;
jQuery .style( self, name, start unit)
}

// =/-= 토큰이 제공된 경우 상대 애니메이션을 수행합니다.
parts[1] ) {
//end는 작업 후 변수 값으로 설정됩니다.
end = ((parts[1] === "-=" ? -1 : 1) * end) 시작하다
}
e.custom( start, end, unit );//디지털 작업이 없으면 전달되지 않는 유일한 것은 ''입니다.
} else {
e.custom( start , val, "" );
}
})

// JS 엄격한 준수
return
}); ,