JavaScript animation effect class encapsulation code _javascript Tips

<input id=output3 style= "position:absolute;top:300;left:300;" />
<input id=output1/>
<input id=output2/>
<br/>
<input id=output4/>

<script>
function Animation (target,targetproperty,closure,precision)
{
closure=closure| | function (x) {return x;};
precision=precision| | 10;
This.handle;

var begintime=new Date ();
var stoptime=new Date ();
This. Begin=function () {
Begintime=new Date ();
This.handle=setinterval (
function () {
var now=new Date ();
Target[targetproperty]=closure (Now.gettime ()-begintime.gettime ());
},
Precision
);
}

This. Continue=function () {
var now=new Date ();
Begintime.settime (Now.gettime ()-stoptime.gettime () +begintime.gettime ());

This.handle=setinterval (
function () {
var now=new Date ();
Target[targetproperty]=closure (Now.gettime ()-begintime.gettime ());
},
Precision
);
}

This. Stop=function (Duration) {

Clearinterval (This.handle);

if (duration===undefined)
{
Stoptime=new Date ();
Duration=stoptime.gettime ()-begintime.gettime ();
}
Else Stoptime.settime (Begintime.gettime () +duration)
Target[targetproperty]=closure (duration);
}
}

function StoryBoard (Duration,onfinish,flag)
{
onfinish=onfinish| | function () {};
var r=new Array ();
R.appendanimation=function (animation)
{
If (animation instanceof animation)
This.push (animation);
}
R.removeanimation=function (animation)
{
for (Var i=0;i<r.length;i++)
{
if (r[i]==animation)
{
R.splice (i,1);
Break
}
}
}
R.start=function () {
for (Var i=0;i<r.length;i++)
{
R[i]. Begin ();
}
SetTimeout (
function () {
for (Var i=0;i<r.length;i++)
{
R[i]. Stop (Duration);
}
},
Duration
);
OnFinish ();
}
return R;

}
Here's how to use////////////////////////////////
function $ (ID)
{
return document.getElementById (ID);
}
var a1=new Animation ($ ("output1"), "value");
var a2=new Animation ($ ("Output2"), "width", function (x) {return Math.floor (X/10);});
var a3=new Animation ($ ("OUTPUT3"). Style, "filter", function (x) {return "alpha (opacity=" +math.floor (x/5000*100) + ")";});
var a4=new Animation ($ ("Output4"). Style, "width", function (x) {return Math.floor (x*x*x/50000/5000) + "px";});
var s=new StoryBoard (5000);
S.appendanimation (A1);
S.appendanimation (A2);
S.appendanimation (A3);
S.appendanimation (A4);
S.start ();

</script>
<pre>
OUTPUT1 is changing value
OUTPUT1 is changing the width
OUTPUT3 is fading in
Output4 is the width with ease
</pre>