Transparency Gradient
function changeopacity () {
Transparency gradient from 1-0 gradient time 1000ms
var fx = ' opacity ', from = 1, to = 0, time = 1000;
The callback function that the gradient completes
var callback = function () {
from = 0; to = 1;
New Animate (Demo, FX, {from:from, to:to, Time:time, Callback:resetbutton}). Start ();
}
Instantiating a gradient function
New Animate (Demo, FX, {
From:from,
To:to,
Time:time,
Callback:callback
). Start ();
}
Function Animate (el, prop, opts) {
This.el = El;
This.prop = prop;
This.from = Opts.from;
this.to = opts.to;
This.time = Opts.time;
This.callback = Opts.callback;
This.animdiff = This.to-this.from;
}
Animate.prototype._setstyle = function (val) {
Switch (this.prop) {
Case ' opacity ':
This.el.style[this.prop] = val;
This.el.style.filter = ' alpha (opacity= ' + val * 100 + ') ';
Break
Default
This.el.style[this.prop] = val + ' px ';
Break
}
}
Animate.prototype._animate = function () {
var that = this;
This.now = new Date ();
This.diff = This.now-this.starttime;
if (This.diff > This.time) {
This._setstyle (this.to);
if (this.callback) {
This.callback.call (this);
}
Clearinterval (This.timer);
Return
}
This.percentage = (Math.floor (this.diff/this.time) * 100)/100);
This.val = (This.animdiff * this.percentage) + This.from;
This._setstyle (This.val);
}
Animate.prototype.start = function () {
var that = this;
This.starttime = new Date ();
Clearinterval (This.timer);
This.timer = setinterval (function () {
That._animate.call (that);
}, 4);
}
Animate.cantransition = function () {
var el = document.createelement (' foo ');
El.style.css Tutorial Text = '-webkit-transition:all 5s linear; ';
Return!! El.style.webkittransitionproperty;
}();