The Animate Custom Animation (2.5K) of the simulation jquery implemented with JS _jquery

It turned out to be good. Why don't you go ahead and write it down.
This version is basically the same as jquery's animate.
I mean, the effect is basically the same. (efficiency has not been tested.) ）；
If a professional tester helps me with the test.
1: Function description
Compatible with mainstream browsers.
1: Support callback function;
2: Support level linkage drawing call;
3: Support delay animation queue delay;
4: Support stop stop animation;
5: Support opacity transparency change;
6: Support + = = *=/= operation;
7: Support unit operation (PX,%);
2: Instructions for use
Jelle (A). Animate (B, C, D);
A: The DOM element ID needed to perform the animation;
B: The main parameters of the animation pass {Key,val,key2,val2}; For example {width: ' 100px ', Height: ' +=100px ', opacity:0.5},
opacity--transparency Changes Support + =-= *=/= operations.
C: When the animation is performed, in milliseconds; [optional default 500 milliseconds];
D: callback function; [Optional]
3: Method Description
1:animate () method
Jelle (' cc '). Animate ({width: ' 100px '},300,function () {alert (' completed ')})//Is CC's width changes to 100px animation at end of 300 milliseconds to "finish"
2:stop () method
Jelle (' cc '). Stop ();//stops the animation that is playing on the CC object.
3:delay () method
Jelle (' cc '). Delay (1000). Animate ({width: ' 100px '}); the width of the//cc changes will be delayed by 1 seconds.
I will keep him perfect.

Copy Code code as follows:

var Jelle = function (ID) {
var $ = function (ID) {return document.getElementById (ID);},
Elem = $ (ID),//Object
F = 0, _this = {}, lazy = ten, Lazyque = 10,//F Animation counter lazy animation delay Lazyque Queue delay
Operator you can change him to make your animation different
Tween = function (T, B, C, D) {return-c * (t/= d) * (t-2) + b},
adv for + = = *=/= operations
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 read the animation queue on the current DOM element
Elem.animate = Elem.animate | | [];
The STOP function will use the
jelle[id]= {};
jelle[id][' Stop '] = true;
Alert (jelle[id][' Stop '])
The unified team included in the port for easy setting delay, with the stop
_this.entrance = function (FN, AGS, Lazytime) {
fn Call function ags parameter Lazytime delay time
settimeout (function () {
FN (Ags[0], ags[1], ags[2]);
}, (Lazytime | | 0));
}
Stop animation This method is not yet available
_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;//Empty counter
Elem.animate[0].callback? Elem.animate[0].callback.apply (Elem): false;
Determine if there is an animation waiting to be executed
if (Elem.animate.length > 1) {
Elem.animate[0].callback = Elem.animate[1].callback;
Elem.animate = $ (id). animate | | [];//Gets the latest animation queue from a DOM object
Elem.animate.shift ()//clear just completed animation queue
$ (id). Animate = elem.animate;//Update the new queue to the DOM
var ea = elem.animate[0];
Loop Play 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.execution, [ea[i][0], ea[i][1], ea[i][2]], lazyque);
}
}else{
elem.animate.length = 0; Queue Clear
$ (id). animate.length = 0; Queue Clear
}
}
}
Set the Lazy method, later queue animation delay time
_this.delay = function (val) {
Lazyque = val;
return _this;
}
Animation changes
_this.execution = 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 + = = etc.
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 (); Action queues
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,1],lazy);
Arguments.callee anonymous function recursive call
})();
}
Entrance
_this.animate = function (sty, T, fn) {
STY,T,FN key,val form of variable parameters, animation, callback function
var len = elem.animate.length;//len View Animation Queue Length
Elem.animate[len] = [];
Elem.animate[len].callback = fn;
Multiple key loops setting changes
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.execution, [I, Sty[i], T], lazyque);
}
}
$ (id). Animate = elem.animate;//Adds a new animation queue to the DOM element
return _this;
}
Code for changes in transparency
_this.alpha = function (val, t) {
var s = (new Date ()). GetTime (),
d = T | | , 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, (b), C, D)/100;
_this.queue (); Queue control
return _this;
}
elem.style[' opacity '] = Tween (t, (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, (b), C, D) + ') ';
_this.queue (); Queue control
return _this;
}
elem.style[' filter ' = ' alpha (opacity= ' + tween (t, (100*b), C, D) + ') ';
jelle[id][' Stop '] && settimeout (Arguments.callee, lazy);
})()
}
}
return _this;
}

Code package download

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

The code above is not up to date.

These two days have also fixed a few wrong places.
This article comes from Blog Park Jelle Blog http://www.cnblogs.com/idche/