ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery1.5.1 animateメソッドのソースコード reading_jquery

jQuery1.5.1 animateメソッドのソースコード reading_jquery

WBOY
WBOYオリジナル
2016-05-16 18:08:391139ブラウズ
コードをコピー コードは次のとおりです:

/*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' には常にノード名があるとは限りません。
var opt = jQuery.extend({}, optall), p,
isElement = this.nodeType === 1 ,
hidden = isElement && jQuery(this).is(":hidden"),
self = this;
//アニメーションを実行するための prop、prop は通常、{key1: の形式の plainObj です。 value1,key2:value2};
for ( p in prop ) {
// magrin-top などの一部のプロパティをキャメルケースに変更して、marginTop にする必要があります。
var name = jQuery.camelCase( p );
//主に前のキャメルケース属性を修正します。
if ( p !== name ) {
prop[ name ] = prop[ p ] ;
delete prop[ p ];
p = name;
}
// 要素自体を実行するとは非表示であり、アニメーション内で Hide と記述する場合は、コールバックを直接実行するだけです。
if ( prop[p] === "hide" && hidden || prop[p] === "show" && !hidden; ) {
return opt.complete.call(this);
}
// prop[key]==(height||width) であり、何らかの特別な処理が必要な場合。 🎜>if ( isElement && ( p === "height" || p === "width" ) ) {
// 何も漏れ出ていないことを確認してください
// IE はオーバーフロー属性を 3 つすべて記録します。 not
// overflowX と
// overflowY が同じ値に設定されている場合、オーバーフロー属性を変更します
opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];

// 高さ/幅の表示プロパティを inline-block に設定します
// 幅/高さを持つインライン要素のアニメーション
// アニメーション
if ( jQuery.css ( this, "display " ) === "inline" &&
jQuery.css( this, "float" ) === "none" ) {
if ( !jQuery.support.inlineBlockNeedsLayout ) {
this.style.display = "inline-block";

} else {
var display (this.nodeName);

// インラインレベル要素は inline- を受け入れますblock;
// ブロックレベルの要素はレイアウトとインラインである必要があります
if ( display === "inline" ) {
this.style.display = "inline-block"; 🎜>} else {
this.style.display = "インライン";
}
}
}
}
// prop[key] が配列の場合、最初の値 prop[p][0] のみを使用します。
if ( jQuery.isArray( prop[p] ) ) {
// (必要な場合) を作成して追加します。への特別イージング
(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 メソッドを参照)
if ( rfxtypes.test(val) ) {
e[ val === "toggle" ? "show" : "hide" : val ]( prop ); 🎜>} else {
var Parts = rfxnum.exec(val),
//start は、値 == null 、undefiend、auto、0、の場合、style または css の初期値を保存します。などは 0 に設定されます;
start = e.cur();
if (parts) {
//end は次のような変更のサイズを指します: {left: -=66px }, then end=66;
var end = parseFloat(parts[2] ),
// z-index などの単位を持たないものであれば、単位演算子は px, %;空に設定、それ以外の場合は px に設定します。
unit = Parts[3] || ( jQuery.cssNumber[ name ] ? "" : "px" ); 開始値
を計算する必要があります。 //% や em など、px でない場合;
if (unit !== "px" ) {
//属性値の名前を (end || 1)unit に設定します。 end =0; が 1 に設定されている場合、開始値は start = ((end || 1) / e.cur()) * start; )unit) ;
//ここでの e.cur() は、jQuery.style(self, name, (end || 1)unit) の実行により start が発生するため、前の start = e.cur(); とは異なります。 e.cur() は除数として 0 にできないため、end=0 の場合に使用されます。 ;
jQuery .style( self, name, start Unit);
}

// =/-= トークンが指定された場合、相対アニメーションを実行します
if ( Parts[1] ) {
//end は演算後の変数値に設定されます。
end = ((parts[1] === "-=" ? -1 : 1) * end)開始;
}
e.custom( start, end,unit );
//デジタル操作がない場合、渡されないのは ''; start , val, "" );
}
}
});

// JS 厳密準拠の場合
}); 、


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。