キューを使用して jquery アニメーション アルゴリズムをシミュレートする example_jquery

*/
(関数($) {
window.$ = $;
})(関数() {

//ID 文字列の照合に使用されます
//(?: ここではグループ化がないことを示します)、通常のコンテンツを参照してください
//しかし個人的には、#
の後に少なくとも 1 文字が必要なので、* を記号に変更した方が良いと思います。 var rquickExpr = /^(?:#([w-]*))$/;
//一見すると重度の jquery 患者です
関数 aQuery(セレクター) {
return new aQuery.fn.init(selector);
}

/**
*アニメーション
* @return {[タイプ]} [説明]
​​*/
var アニメーション = function() {

var self = {};
var Queue = [] //アニメーションキュー
; var firing = false //アニメーション ロック
var first = true; // インターフェースの追加によってトリガーされます

var getStyle = function(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
//これらはすべて特定のアニメーション効果であり、理解するのが難しいものは何もありません
var makeAnim = function(element, options, func) {
var width = options.width
// 特定の実行アルゴリズムをパッケージ化しました
//css3
//setTimeout
element.style.webkitTransitionDuration = '2000ms';
element.style.webkitTransform = 'translate3d(' width 'px,0,0)';

//モニタリングアニメーションが完了しました
element.addEventListener('webkitTransitionEnd', function() {
func()
});
}

var _fire = function() {
//追加されたアニメーションがトリガーされています
if (!fireing) {
var OnceRun = Queue.shift();
if (onceRun) {
//繰り返しトリガーを防止します
起動 = true;
//次
OnceRun(function() {
fire = false;
//ここではシリアル呼び出しの効果が非常に巧妙に生み出されています
_fire();
});
} else {
起動 = true;
}
}
}

自分自身を返す = {
//キューを追加
add: function(要素, オプション) {
//ここにアルゴリズム全体の鍵があります
//配列に関数を追加するのと同等
//[function(func){},...]
// これは _fire の OnceRun メソッドであり、そのときに func が渡されました。
// アーロンは、プリコンパイルなどのプログラミングでこのテクニックを使用するのが好きです。
Queue.push(function(func) {
makeAnim(element, options, func);
});

//キューがある場合は、すぐにアニメーションをトリガーします
If (最初の && Queue.length) {
//このスイッチは、後で追加される要素のキューイングを制御する上で非常に良い役割を果たします
1 番目 = false;
//これは _fire();
を直接実行するのと同じです // アーロンは A をインストールするのが好きで、意図的に self.fire を追加します。おそらく彼は先見の明があるのでしょう
self.fire();
}
},
//トリガー
火災: function() {
_fire();
}
}
}();

aQuery.fn = aQuery.prototype = {
実行: function(options) {
anime.add(this.element, options);
これを返します;
}
}

var init = aQuery.fn.init = function(selector) {
var match = rquickExpr.exec(selector);
var 要素 = document.getElementById(match[1])
This.element = 要素;
これを返します;
}
//このコード行を過小評価するところでした
//jqueryの使い方が上手になりました
//直接 aQuery.fn.init = aQuery.fn にした方が良いのではないでしょうか?
//もう 1 つの init 変数はクエリを減らすためのもので、最適化の考え方が随所にあります。
init.prototype = aQuery.fn;
aQuery を返します;
}());

//ドム
var oDiv = document.getElementById('div1');

//
を呼び出します oDiv.onclick = function() {

$('#div1').run({
'幅': '500'
}).run({
'幅': '300'
}).run({
'幅': '1000'
});
};

この記事が皆さんの jQuery プログラミングに役立つことを願っています。