Javascript controllable transparent special effect implementation code

The space is fully displaced by the absolute position of CSS. Before getting started, let's practice the recursive usage of setTimeout (used to simulate setInterval ).
Copy codeThe Code is as follows:
Function text (el ){
Var node = (typeof el = "string ")? Document. getElementById (el): el;
Var I = 0;
Var repeat = function (){
SetTimeout (function (){
Node. innerHTML = "I ++;
If (I <= 100 ){
SetTimeout (arguments. callee, 100 );
}
}, 100)
}
Repeat ();
}

Let's try out the simplest light effect, which is to change the line of node. innerHTML to the transparency setting.
Copy codeThe Code is as follows:
Function fadeIn (el ){
Var node = (typeof el = "string ")? Document. getElementById (el): el;
Var I = 0;
Var fade = function (){
SetTimeout (function (){
! + "\ V1 "? (Node. style. filter = "alpha (opacity =" + I + ")"): (node. style. opacity = I/100 );
I ++;
If (I <= 100 ){
SetTimeout (arguments. callee, 100 );
}
}, 100)
}
Fade ();
}

But this is not perfect, because the IE filter may expire in IE7. We must use zoom = 1 to activate hasLayout. Let's add some configurable parameters to expand it. The comment is already very detailed. I don't understand. Ask me again in the message.
Copy codeThe Code is as follows:
Function opacity (el ){
// Required Parameter
Var node = (typeof el = "string ")? Document. getElementById (el): el,
// Optional parameter
Options = arguments [1] | | {},
// Change duration
Duration = options. duration | 1.0,
// Transparency at the beginning
From = options. from | 0.0,
// Transparency at end
To = options. to | 0.5,
Operation = 1,
Init = 0;
If (to-from <0 ){
Operation =-1,
Init = 1;
}
// Internal Parameters
// SetTimeout execution interval, in milliseconds
Var frequency = 100,
// Set the number of repeated calls
Count = duration * 1000/frequency,
// Calculates the increment of each transparency.
Detal = Math. abs (to-from)/count,
// Number of ongoing times
I = 0;
Var main = function (){
SetTimeout (function (){
If (! + "\ V1 "){
If (node. currentStyle. hasLayout) node. style. zoom = 1; // prevents filter invalidation
Node. style. filter = "alpha (opacity =" + (init * 100 + operation * detal * I * 100). toFixed (1) + ")"
} Else {
Node. style. opacity = (init + operation * detal * I). toFixed (3)
}
Node. innerHTML = (init + operation * detal * I). toFixed (3)
I ++;
If (I <= count ){
SetTimeout (arguments. callee, frequency );
}
}, Frequency)
}
Main ();
}

Demo:
<Style>. text {width: 100px; height: 100px; background: red; display: inline-block;} </style>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
<Div class = "text" onclick = "opacity (this, {duration: 4.0, from: 0.0, to: 1})"> </div>
<Div class = "text" onclick = "opacity (this, {duration: 4.0, from: 1.0, to: 0})"> </div>
But the above is not perfect. There is a Bug. We use the short-circuit operator to determine whether to use the default parameter or the input parameter, but in javascript, the number 0 or even 0.0 is automatically converted to false. Therefore, in the first example, if we input 0 in to, it will never use this 0, but the default 0.5. Solution: convert it to the string "0 ". In addition, the parameter I is not necessary. We can save it and use count to take charge of all the cycles. But in this way, our thinking will be reversed. It turns out to be a plus. We want to reduce it.
Copy codeThe Code is as follows:
Function opacity (el ){
// Required Parameter
Var node = (typeof el = "string ")? Document. getElementById (el): el,
// Optional parameter
Options = arguments [1] | | {},
// Change duration
Duration = options. duration | 1.0,
// Transparency at the beginning
From = options. from | 0.0,
// Transparency at end
To = (options. to & options. to + "") | 0.5,
Operation =-1,
Init = 1;
If (to-from <0 ){
Operation = 1,
Init = 0;
}
// Internal Parameters
// SetTimeout execution time, in the unit
Var frequency = 100,
// Set the number of repeated calls
Count = duration * 1000/frequency,
// Calculates the increment of each transparency.
Detal = operation * Math. abs (to-from)/count;
Var main = function (){
SetTimeout (function (){
If (! + "\ V1 "){
If (node. currentStyle. hasLayout) node. style. zoom = 1; // prevents filter invalidation
Node. style. filter = "alpha (opacity =" + (init * 100 + detal * count * 100). toFixed (1) + ")"
} Else {
Node. style. opacity = (init + detal * count). toFixed (3)
}
Count --;
If (count + 1 ){
SetTimeout (arguments. callee, frequency );
}
}, Frequency)
}
Main ();
}

Further Optimization, using the prototype sharing method.
Copy codeThe Code is as follows:
Function Opacity (el ){
Var node = (typeof el = "string ")? Document. getElementById (el): el,
Options = arguments [1] | | {},
Duration = options. duration | 1.0,
From = options. from | 0.0,
To = (options. to & options. to + "") | 0.5,
Operation =-1,
Init = 1;
If (to-from <0 ){
Operation = 1,
Init = 0;
}
Var frequency = 100,
Count = duration * 1000/frequency,
Detal = operation * Math. abs (to-from)/count;
This. main (node, init, detal, count, frequency );
}
Opacity. prototype = {
Main: function (node, init, detal, count, frequency ){
SetTimeout (function (){
If (! + "\ V1 "){
If (node. currentStyle. hasLayout) node. style. zoom = 1; // prevents filter invalidation
Node. style. filter = "alpha (opacity =" + (init * 100 + detal * count * 100). toFixed (1) + ")"
} Else {
Node. style. opacity = (init + detal * count). toFixed (3)
}
Node. innerHTML = (init + detal * count). toFixed (3)
Count --;
If (count + 1 ){
SetTimeout (arguments. callee, frequency );
}
}, Frequency)
}
}

DEMO code:
<Style>. text {width: 100px; height: 100px; background: red; display: inline-block;} </style>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
<Div class = "text" onclick = "new Opacity (this, {duration: 4.0, from: 0.0, to: 1})"> </div>
<Div class = "text" onclick = "new Opacity (this, {duration: 4.0, from: 1.0, to: 0})"> </div>