Simulation of jquery's animate Custom Animation (2.5 K) implemented by js)

Later I found that it was not bad. It is better to continue writing.
This version is basically the same as jquery's animate.
I mean, the results are basically the same. (Efficiency has not been tested yet .);
If you have a professional tester, help me test it.
1: Function Description
Compatible with mainstream browsers.
1: callback functions are supported;
2: supports cascade animation calls;
3: delay animation queue latency is supported;
4: stop animation is supported;
5: supports opacity transparency changes;
6: supports the + =-= * =/= operation;
7: supports unit operations (px, % );
2: Instructions for use
Jelle (A). animate (B, C, D );
A: ID of the dom element to be animated;
B: The main parameters of the animation are passed {key, val, key2, val2}; for example, {width: '100px ', height:' + = 100px ', opacity: 0.5 },
Opacity-supports + =-= * =/= operations for transparency changes.
C: The animation is executed in milliseconds. [Default Value: 500 milliseconds].
D: callback function. [Optional]
3: Method description
1: animate () method
Jelle ('cc '). animate ({width: '100px '}, 300, function () {alert ('complete ')}); // The cc width changes in 300 milliseconds to the end of the 100px animation'
2: stop () method
Jelle ('cc'). stop (); // stop an animation playing on a cc object.
3: delay () method
Jelle ('cc'). delay (1000). animate ({width: '100px '}); // the change in the cc width will be delayed for 1 second.
I will keep improving him.
Copy codeThe Code is as follows:
Var jelle = function (id ){
Var $ = function (id) {return document. getElementById (id );},
Elem = $ (id), // object
F = 0, _ this = {}, lazy = 10, lazyque = 10, // f animation counter lazy animation delay lazyque queue delay
// Operator you can change to make your animation different
Tween = function (t, B, c, d) {return-c * (t/= d) * (t-2) + B },
// Adv for + =-= * =/=
Adv = function (val, B ){
Var va, re =/^ ([+-\ * \/] =) ([-]? [\ D.] + )/;
If (re. test (val )){
Var reg = val. match (re );
Reg [2] = parseFloat (reg [2]);
Switch (reg [1]) {
Case '+ = ':
Va = reg [2];
Break;
Case '-= ':
Va =-reg [2];
Break;
Case '* = ':
Va = B * reg [2]-B;
Break;
Case '/= ':
Va = B/reg [2]-B;
Break;
}
Return va;
}
Return parseFloat (val)-B;
}
// Elem. animate reads the animation queue for the current dom element.
Elem. animate = elem. animate | [];
// Use the stop Function
Jelle [id] = {};
Jelle [id] ['stop'] = true;
// Alert (jelle [id] ['stop'])
// The unified queue entry is used to conveniently set latency and stop
_ This. entrance = function (fn, ags, lazytime ){
// Fn calls the ags parameter lazytime delay time.
SetTimeout (function (){
Fn (ags [0], ags [1], ags [2]);
}, (Lazytime | 0 ));
}
// Stop animation. This method is not available yet.
_ This. stop = function (){
Jelle [id] ['stop'] = false;
Elem. animate. length = 0;
$ (Id). animate. length = 0;
Return _ this;
}
// Queue operations
_ This. queue = function (){
If (elem. animate & ++ f = elem. animate [0]. length ){
F = 0; // clear the counter
Elem. animate [0]. callback? Elem. animate [0]. callback. apply (elem): false;
// Determine whether an animation is waiting for execution
If (elem. animate. length> 1 ){
Elem. animate [0]. callback = elem. animate [1]. callback;
Elem. animate = $ (id). animate | []; // get the latest animation queue from the dom object
Elem. animate. shift (); // clear the animation queue after execution
$ (Id). animate = elem. animate; // update the new queue to the dom.
Var ea = elem. animate [0];
// Loop playback queue Animation
For (var I = 0; I <ea. length; I ++ ){
Ea [I] [0] === 'opacity '? _ This. entrance (_ this. alpha, [ea [I] [1], ea [I] [2], lazyque ):
_This.entrance(_this.exe cution, [ea [I] [0], ea [I] [1], ea [I] [2], lazyque );
}
} Else {
Elem. animate. length = 0; // The queue is clear.
$ (Id). animate. length = 0; // clear queue
}
}
}
// Set the lazy method and the queue animation delay time in the future
_ This. delay = function (val ){
Lazyque = val;
Return _ this;
}
// Animation changes
_This.exe cution = function (key, val, t ){
// Alert (val)
Var s = (new Date (). getTime (), d = t || 500,
B = parseFloat (elem. style [key]) | 0,
C = adv (val, B), // adv is used to set advanced operations such as + =-=.
Un = val. match (/\ d + (. +)/) [1]; // Unit
(Function (){
Var t = (new Date (). getTime ()-s;
If (t> d ){
T = d;
Elem. style [key] = parseInt (tween (t, B, c, d) + un;
_ This. queue (); // operation queue
Return _ this;
}
Elem. style [key] = parseInt (tween (t, B, c, d) + un;
Jelle [id] ['stop'] & setTimeout (arguments. callee, lazy );
// _ This. entrance (arguments. callee, [1, 1], lazy );
// Arguments. callee anonymous function recursive call
})();
}
// Entry
_ This. animate = function (sty, t, fn ){
// Stash, t, and fn are the changed parameter keys, val form, and callback functions during animation.
Var len = elem. animate. length; // len view the length of the animation queue
Elem. animate [len] = [];
Elem. animate [len]. callback = fn;
// Change the multi-key loop settings
For (var I in sty ){
Elem. animate [len]. push ([I, sty [I], t]);
If (len = 0 ){
I = 'opacity '? _ This. entrance (_ this. alpha, [sty [I], t], lazyque ):
_This.entrance(_this.exe cution, [I, sty [I], t], lazyque );
}
}
$ (Id). animate = elem. animate; // Add the new animation queue to the dom element.
Return _ this;
}
// Code with transparency changes
_ This. alpha = function (val, t ){
Var s = (new Date (). getTime (),
D = t | 500, B, c;
If (document. defaultView ){
B = document. defaultView. getComputedStyle (elem, null) ['opacity '] | 1,
C = adv (val, B) * 100;
(Function (){
Var t = (new Date (). getTime ()-s;
If (t> d ){
T = d;
Elem. style ['opacity '] = tween (t, (100 * B), c, d)/100;
_ This. queue (); // queue control
Return _ this;
}
Elem. style ['opacity '] = tween (t, (100 * B), c, d)/100;
Jelle [id] ['stop'] & setTimeout (arguments. callee, lazy );
})()
} Else {
B = elem. currentStyle ['filter']?
(Elem. currentStyle ['filter']. match (/^ alpha \ (opacity = ([\ d \.] +) \) $/) [1]/100: 1;
C = adv (val, B) * 100;
(Function (){
Var t = (new Date (). getTime ()-s;
If (t> d ){
T = d;
Elem. style ['filter'] = 'Alpha (opacity = '+ tween (t, (100 x B), c, d) + ')';
_ This. queue (); // queue control
Return _ this;
}
Elem. style ['filter'] = 'Alpha (opacity = '+ tween (t, (100 x B), c, d) + ')';
Jelle [id] ['stop'] & setTimeout (arguments. callee, lazy );
})()
}
}
Return _ this;
}


Package and download code

The program may be modified every day. If you want the latest ainimate, you can email me.

The above code is no longer the latest.

Several errors have been corrected in the past two days.
This article is from blog garden jelle blog http://www.cnblogs.com/idche/