How to use and extend the jquery animation (animate)

jquery animations can have a lot of effect and support extended animations, where http://easings.net/zh-cn# has a very useful animation extension based on jquery, especially on some curves or parabolic lines where it is difficult to make ideal animations.

The core idea of jquery animation is to divide the whole interval into n time period, and calculate the interval ratio value of the Moving (change) by the time animation relation function.

This is a easings free drop animation curve, horizontal for the time, longitudinal for the Movement (change) interval, at different times to calculate the corresponding movement (change) interval proportional value can achieve the corresponding animation effect.
Here's a look at the bottom part of the code:

Animation Entry Code:

JQuery.fn.extend ({fadeto:function (speed, to, easing, callback) {//show no hidden elements after setting O            Pacity to 0 return This.filter (ishidden). CSS ("opacity", 0). Show ()//animate to the value specified    . End (). Animate ({opacity:to}, speed, easing, callback); }, Animate:function (prop, speed, easing, callback) {var empty = Jquery.isemptyobject (prop), opt all = Jquery.speed (speed, easing, callback), doanimation = function () {//Operate on a copy O F prop So Per-property easing won ' t is lost var anim = Animation (This, Jquery.extend ({}, prop), Optall)                ;                Empty animations resolve immediately if (empty) {Anim.stop (true);        }            }; return Empty | |            Optall.queue = = = False?    This.each (doanimation): This.queue (Optall.queue, doanimation); }, Stop:function(Type, clearqueue, gotoend)            {var stopqueue = function (hooks) {var stop = Hooks.stop;            Delete hooks.stop;        Stop (gotoend);        };            if (typeof type!== "string") {gotoend = Clearqueue;            Clearqueue = type;        type = undefined; } if (Clearqueue && type!== false) {This.queue (type | |        "FX", []); } return This.each (function () {var dequeue = true, index = type! = NULL && type            + "Queuehooks", timers = jquery.timers, data = Jquery._data (this); if (index) {if (data[index] && data[index].stop) {stopqueue (data[ind                EX]); }} else {for (index in data) {if (data[index] && data[index ].stop && rrun.test (index)) {Stopqueue (data[index]); }}} for (index = timers.length; index--;)                    {if (timers[index].elem = = = This && (type = = NULL | | timers[Index].QUEUE = = = Type)) {                    timers[index].anim.stop (gotoend);                    Dequeue = false;                Timers.splice (index, 1); }}//Start the next in the queue if the last step wasn ' t forced//timers currently Wil  L Call their complete callbacks, which would dequeue//But only if they were gotoend if (dequeue | |            !gotoend) {Jquery.dequeue (this, type);    }        }); }});

The

can see that the Animate method is implemented based on the Animation object, but requires a jquery.speed (speed, easing, callback) return value when creating the Animation object, the return value (that is, the animation's time and interval off function), which is also the kind of extension of this return value when doing animation expansion. Here's a look at what Jquery.speed did:

Jquery.speed = function (speed, easing, FN) {var opt = speed && typeof Speed = = = = "Object"? Jquery.extend ({}            , speed): {COMPLETE:FN | |!fn && Easing | | Jquery.isfunction && speed, duration:speed, easing:fn && easing | |    Easing &&!jquery.isfunction (easing) && easing}; Opt.duration = JQuery.fx.off? 0:typeof Opt.duration = = = "Number"? Opt.duration:opt.duration in JQuery.fx.speeds?    jquery.fx.speeds[opt.duration]: jquery.fx.speeds._default; Normalize Opt.queue-true/undefined/null, "FX" if (Opt.queue = = NULL | | opt.queue = = true) {Opt.que    UE = "FX";    }//Queueing opt.old = Opt.complete;        Opt.complete = function () {if (Jquery.isfunction (Opt.old)) {Opt.old.call (this);        } if (Opt.queue) {Jquery.dequeue (this, opt.queue);    }    }; return opt;}; jquery.easing = {Linear:fUnction (P) {return p;    }, Swing:function (p) {return 0.5-math.cos (P*MATH.PI)/2; }};

Some initialization is done in the code above, which also contains some default data, including the default support animation, and the default animation duration, which we can use on the corresponding parameters such as $ (' div ') when we call the animation. Animate ({top: ' 100px '}, ' slow ‘);
In jquery.speed processing, the opt.duration interval value is extracted, which is the duration in milliseconds, the general default is as follows, and the default is 400 milliseconds if you do not specify the length of the animation. That is, you can write $ (' div ') when you call the animation. Animate ({top: ' 100px '});

jQuery.fx.speeds = {    slow: 600,    fast: 200,    // Default speed    _default: 400};

Then is the Animation object, this object is just a wrapper on the Jquery.tween object, and the animation timer start and stop processing, so do not paste the code, directly see Jquery.tween code

function Tween (elem, options, prop, end, easing) {return new Tween.prototype.init (Elem, options, prop, end, easing );} Jquery.tween = Tween; Tween.prototype = {Constructor:tween, init:function (elem, options, prop, end, easing, unit) {This.elem        = Elem;        This.prop = prop; this.easing = Easing | |        "Swing";        this.options = options;        This.start = This.now = This.cur ();        This.end = end; This.unit = Unit | | (jquery.cssnumber[prop]?    "": "px");        }, Cur:function () {var hooks = tween.prophooks[This.prop];            Return hooks && hooks.get?    Hooks.get (This): Tween.prophooks._default.get (this);        }, Run:function (percent) {var eased, hooks = tween.prophooks[This.prop];                if (this.options.duration) {//animation function call This.pos = eased = jquery.easing[This.easing] ( Percent, This.options.duration * percent, 0, 1, this.optiOns.duration);        } else {This.pos = eased = percent;        } This.now = (this.end-this.start) * eased + This.start;        if (this.options.step) {This.options.step.call (This.elem, This.now, this);        } if (hooks && hooks.set) {hooks.set (this);        } else {tween.prophooks._default.set (this);    } return this; }}; Tween.prototype.init.prototype = Tween.prototype;

In this code is the final call to the animation function (the code has already added comments), this animation call function is also we need to follow the extension, the following is the extension function parameters:

jQuery.easing[ this.easing ](percent, this.options.duration * percent, 0, 1, this.options.duration)

You can define some meanings from the parameter name:
Percent current animation time-to-total ratio (0% ~ 100%) Of course, this is represented by a decimal number, such as 0.6.
This.options.duration * Percent The current animation is complete
0 returns the minimum value
1 returns the maximum value
This.options.duration Total animation duration
It needs to be explained that this function does not require the element to move (change) The style value, only need the animation time progress, through the time progress to obtain a return maximum and the minimum range of values by this value multiplied by the movement (the variance of the total difference) can calculate the position of the moving change, so as to achieve animation. Note that when percent exceeds 100%, the return value returns the maximum value as it exceeds.

So what should you do when you extend an animation?

jQuery.extend(jQuery.easing, {     ‘动画名‘ : function (percent, present, minReturn, maxReturn, duration){                         return  处理函数公式 ;         },         ...})

Call Mode:

 $(‘div‘).animate({top:‘100px‘}, 1000, ‘动画名‘);

Here it can be said that if we do not perform some jquery on jquery based on the extended animation function can follow the above parameter description to do, the current time to do is to pay attention to element style unit value (best guarantee consistency), It is also important to note that the Style property value of the element is not the same as that of the CSS file, which is not described here.

Here is a free drop native use code, the animation function is taken from easings, and other functions are used in a similar way

    (function () {//Animation function easeoutbounce (n, E, T, a, i) {return (e/= i) < 1/2.75? A * (7.5625 * e * e) + t:e < 2/2.75? A * (7.5625 * (e-= 1.5/2.75) * e +.) + T:e < 2.5/2.75?        A * (7.5625 * (e-= 2.25/2.75) * e +. 9375) + t:a * (7.5625 * (e-= 2.625/2.75) * e +. 984375) + t;        } var percent = 0, duration = $, T, div = document.createelement (' div '), diff = 600;        Div.style.width = ' 10px ';        Div.style.height = ' 10px ';        div.style.position = ' absolute ';        Div.style.top = ' 0px ';        Div.style.left = ' 50% ';        Div.style.backgroundColor = ' red '; t = setinterval (function () {var _percent = percent/100, per = Easeoutbounce (_percent, du            Ration * _percent, 0, 1, duration);            Div.style.top = Math.Round (diff * per) + ' px ';            Percent + = 1;            if (Percent >) {clearinterval (t);   }}, 20);     Document.body.appendChild (DIV);    Console.info (document.body); })();

How to use and extend the jquery animation (animate)