Use queue to simulate jquery animation algorithm example_jquery

*/
(function($) {
​ window.$ = $;
})(function() {

//Used to match ID string
//(?: Indicates no grouping here), refer to the regular content
//But I personally think it would be better to change * to a sign, because there must be at least one character after #
var rquickExpr = /^(?:#([w-]*))$/;
//At first glance, he is a severe patient of jquery
Function aQuery(selector) {
           return new aQuery.fn.init(selector);
}

/**
* Animation
* @return {[type]} [description]
​​*/
var animation = function() {

var self = {};
        var Queue = []; //Animation Queue
        var firing = false //Animation lock
        var first = true; //Triggered through add interface

var getStyle = function(obj, attr) {
                  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
//These are all specific animation effects, there is nothing difficult to understand
        var makeAnim = function(element, options, func) {
            var width = options.width
// Packaged a specific execution algorithm
                            //css3
                          //setTimeout
                element.style.webkitTransitionDuration = '2000ms';
                  element.style.webkitTransform = 'translate3d(' width 'px,0,0)';

//Monitoring animation completed
               element.addEventListener('webkitTransitionEnd', function() {
                  func()
            });
}

var _fire = function() {
//The added animation is being triggered
                if (!fireing) {
            var onceRun = Queue.shift();
                     if (onceRun) {
//Prevent repeated triggering
                    firing = true;
                            //next
                     onceRun(function() {
fire = false;
//The effect of serial calls is very cleverly produced here
                        _fire();
                     });
                     } else {
                    firing = true;
                }
            }
}

return self = {
//Add queue
               add: function(element, options) {
//Here is the key to the entire algorithm
//Equivalent to adding a function to the array
//[function(func){},...]
                              // That is the onceRun method in _fire, and func was passed in at that time.
                               // Aaron likes to use this technique in his programming, such as pre-compilation and so on.
Queue.push(function(func) {
                         makeAnim(element, options, func);
                });

//If there is a queue, trigger the animation immediately
If (first && Queue.length) {
//This switch plays a very good role in controlling the queuing of elements added later
                      1st = false;
//This is equivalent to running _fire();
directly // Aaron likes to install A, deliberately add a self.fire, maybe he is far -sighted
                        self.fire();
                }
            },
//Trigger
Fire: function() {
                   _fire();
            }
}
}();

aQuery.fn = aQuery.prototype = {
         run: function(options) {
animation.add(this.element, options);
              return this;
}
}

var init = aQuery.fn.init = function(selector) {
        var match = rquickExpr.exec(selector);
         var element = document.getElementById(match[1])
This.element = element;
         return this;
}
//I almost underestimated this line of code
//I learned how to use jquery well
//Isn’t it better to directly aQuery.fn.init = aQuery.fn?
//One more init variable is just to reduce queries, the idea of ​​optimization is everywhere.
init.prototype = aQuery.fn;
Return aQuery;
}());

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

//Call
oDiv.onclick = function() {

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