An animation algorithm for simulating jquery with a queue

Aaron recently madly in love with the algorithm research, estimated to be dead and wounded a lot of brain cells, I like to pick up off-the-shelf, can save some strength. Found that he wrote a section of the source code, run a bit, but also quite fun, and then take to analyze, a absorption under the nutrition, and secondly deepen the source of learning skills. Say this source is really improve JS internal strength of a big secret, do not believe, and I come to taste it.

//Execute the function immediately, there is nothing to say. See the demo below/** (function ($) {///This is provided by the return value of the immediate executing function immediately following it) (function () {//The result of this function running is $ return aquery} ())*/(function($) {window.$ = $;}) (function() {//used to match ID string    //(?: means not grouped here), refer to regular content    //but I personally think it would be better to change the * to +, because # at least one character.    varrquickexpr =/^ (?: # ([\w-]*)) $/;//a look at the severe patient of jquery    functionAquery (selector) {return NewAQuery.fn.init (selector); }/** * Animation * @return {[type]} [description]*/    varAnimation =function() {varself = {};varQueue = [];//Animation Queue        varFireing =false //Animation Lock        varFirst =true;//triggered via the Add interface        varGetStyle =function(obj, attr) {returnObj.currentstyle? OBJ.CURRENTSTYLE[ATTR]: getComputedStyle (obj,false) [attr]; }//There are specific animation effects, there is nothing difficult to understand        varMakeanim =function(element, options, func) {varwidth = options.width//package a specific execution algorithm                //CSS3                //SetTimeoutelement.style.webkitTransitionDuration = ' 2000ms '; Element.style.webkitTransform = ' Translate3d (' + width + ' px,0,0) ';//end of listening animationElement.addeventlistener (' Webkittransitionend ',function() {func ()}); }var_fire =function() {//adding animations is triggering            if(!fireing) {varOncerun = Queue.shift ();if(Oncerun) {//prevent repetitive triggeringFireing =true;//NextOncerun (function() {fireing =false;//This is a clever result of a serial call ._fire ();                }); }Else{fireing =true; }            }        }returnSelf = {//Increase QueueAddfunction(element, Options) {//This is the key to the entire algorithm.                //equivalent to adding a function to the array                //[Function (func) {},...]                //that is, the Oncerun method in _fire, which is then passed in by Func.                 //in Aaron's programming, I like to use this technique, like pre-compiling something. Queue.push (function(func)                {Makeanim (element, options, func); });//If there is a queue that immediately triggers the animation                if(First && Queue.length) {//This switch is very good for controlling the elements that are added later to queue the functionFirst =false;//this is equivalent to running _fire directly ();                    //Aaron likes to pack A, deliberately add a self.fire out, perhaps he is farsightedSelf.fire (); }            },//triggeringFire:function() {_fire ();    }        }    }(); Aquery.fn = Aquery.prototype = {run:function(options) {Animation.add ( This. element, options);return  This; }    }varinit = AQuery.fn.init =function(selector) {varMatch = rquickexpr.exec (selector);varelement = document.getElementById (match[1]) This. element = element;return  This; }//almost underestimated this line of code    //jquery looks good, you learn.    //Direct AQuery.fn.init = Aquery.fn not better?    //One more init variable is just to reduce the query, the idea of optimization everywhere. Init.prototype = Aquery.fn;returnAquery;} ());//DomvarOdiv = document.getElementById (' Div1 ');//calledOdiv.onclick =function() {$ (' #div1 '). Run ({' width ': ' $ '). Run ({' width ': ' + '}). Run ({' width ': ' 1000 '}); };

You can get your own mode by attaching HTML. Remember to browse with Chrome.

<div id= "Div1" style= "Width:100px;height:50px;background:red;cursor:pointer;color: #fff; text-align:center; line-height:50px; "Data-mce-style=" width:100px; height:50px; background:red; Cursor:pointer; Color: #fff; Text-align:center; line-height:50px; " > Click </div>

Demo Address: This is not a demonstration.

Other wonderful articles
jquery Tutorial (-jquery) serialization form of AJAX operationsjquery Tutorial (-ajax) performing a POST request for Operationjquery Tutorial (-jquery) Ajax + PHP operation for AJAX requests to provide different ...jquery Tutorial (-jquery) Ajax callback functionjquery Tutorial (-ajax) error handling of operationsjquery Tutorial (-ajax) Ajax and events for Operation
more about Android Development articles

An animation algorithm for simulating jquery with a queue