jquery Source Learning 11--Animation

Jquery.setauto This method really does not see what is the use, and to the later version of this method removed

See the Speed method directly

jquery.extend ({speed:function(s,o) {o= O | | {}; if(O.constructor = =Function) o={complete:o}; varSS = {slow:600, fast:200 }; O.duration= (s && s.constructor = = number? S:ss[s]) | | 400; //QueueingO.oldcomplete =O.complete; O.complete=function() {Jquery.dequeue ( This, "FX"); if(o.oldcomplete && O.oldcomplete.constructor = =Function) o.oldcomplete.apply ( This );            }; returno; }});

From the name, it's easy to know that this is a way to control speed.

From the source, the Animate method is called by Jquery.speed (Speed,callback) once

The speed method eventually constructs a JSON-like config with the following structure:

    {        Duration:+,// duration        oldcomplete:function() {            ...  // Custom Function         }, complete        :function() {            Jquery.dequeue (This, "FX");             if (o.oldcomplete && O.oldcomplete.constructor = = Function                )  This  );        }    }

When complete is called, the this point must be changed, so the analysis will be seen when you call complete.

The next Dequeue method is the same, literally, the meaning of the team.

The next FX method is the core

jquery.extend (FX:function(Elem, options, prop) {varz = This; Z.O= {...}; Z.el=Elem; Z.A=function(){...}; Z.max=function(){...}; Z.cur=function(){...}; Z.custom=function(from,to) {...}; Z.show=function(P) {...}; Z.hide=function(){...}; Z.step=function(Firstnum, Lastnum) {...}; }    );

In fact, JQUERY.FX is used as a construction method in the source code, and is found in the animate strength method through new jquery.fx () to invoke the

Z is the new object and expands a number of methods on the object.

The methods inside the constructor call each other, so it's more complicated, and we'll look at an example

$ ("#div1"). Animate ({"width": 500},1000,function () {alert ("over");});

The meaning is to let #div1 in 1s time wide change to 500, after the end of the popup over

1. Queue

The invocation form is this.queue (function () {...});

Queuefunction(TYPE,FN) {if( !fn) {fn=type; Type= "FX"; }            return  This. each (function(){//here is the jquery object            if( ! This. Queue) This. Queue = {}; if( ! This. Queue[type]) This. queue[type] = []; //The code above is to append the queue attribute to each DOM element inside the jquery object, and the queue will store the function according to its type .             This. Queue[type].push (FN); //If there is only one function in the queue of the current type type, it is executed directly, and this changes the inside of the function for each DOM object that is traversed to each            if( This. queue[type].length = = 1) fn.apply ( This);    }); }

2. Perform the functions inside the incoming This.queue

Animatefunction(prop,speed,callback) {return  This. Queue (function(){                     This. Curanim = prop;//This points to the DOM object traversed in the queue, prop            /*{"width": $, "opacity": "Height" :*/                         for(varPinchprop) {                varE =NewJQUERY.FX ( This, Jquery.speed (Speed,callback), p); if(Prop[p].constructor = =Number )
　　　　　　　　　　　　//custom Two parameters are the starting value and the target value e.custom (E.cur (), prop[p]); Else//I don't know what time to go, else this branche[Prop[p]] (prop);    }                    }); },

3, cur Custom

        // get the value        of elem current prop function () {            var r = parsefloat (jquery.curcss (Z.el, prop));             return R && r >-10000? R:z.max ();        };

        // Binding the StartTime, now property on the current Instanced object, now stores the first value from which to start, and the StartTime and now properties provide a cushion for the next execution of a and step.        function (from,to) {            = (new  Date ()). GetTime ();             = from ;            Z.A ();                 = SetInterval (function() {                z.step (from, to);             ;        };

4, a

Z.A =function(){            //at present, it is clear that the options only have complete, oldcomplete, duration three attributes, no step            if(Options.step) options.step.apply (Elem, [Z.now]); //when changing the style is transparent, for IE browser to do special processing            if(prop = = "opacity" ) {                if(Z.now = = 1) Z.now = 0.9999; if(window. ActiveXObject) Y.filter= "Alpha (opacity=" + z.now*100 + ")"; Elsey.opacity=Z.now; } Else if(parseint (z.now))//if the form of motion is not opacity, it is processed directly by digitalY[prop] = parseint (z.now) + "px"; Y.display= "Block"; };

5. Step

This step method is called every 13 milliseconds

Step first gets the timestamp of the current call to step

To determine if the destination value has been reached.

Increments or decrements the value of Z.now if not to the destination value, and executes again Z.A assigns the incremented or decremented value to the DOM element

If the destination value is reached, stop the timer, and then determine if the style of the movement is to the destination, and if it's all there, then do a series of subsequent operations, and execute the end of the callback function

jquery Source Learning 11--Animation