JavaScript controllable transparent special effects implementation code

The space is completely displaced by the absolute positioning of CSS. Before we start, we practice the recursive usage of setTimeout (used to simulate setInterval).

Copy the codeThe code is as follows:

 
function text(el){ 
var node = (typeof el == "string")? (el) : el; 
var i = 0; 
var repeat = function(){ 
setTimeout(function(){ 
 = "<h1>"+i+"</h1>"; 
i++; 
if(i <= 100){ 
setTimeout(, 100); 
} 
},100) 
} 
repeat(); 
} 

Let's try the simplest fade-in effect, which is to change that line to the transparency setting.

Copy the codeThe code is as follows:

 
function fadeIn(el){ 
var node = (typeof el == "string")? (el) : el; 
var i = 0; 
var fade = function(){ 
setTimeout(function(){ 
!+"\v1"? (="alpha(opacity="+i+")"): ( = i / 100); 
i++; 
if(i <= 100){ 
setTimeout(, 100); 
} 
},100) 
} 
fade(); 
} 

But this is not perfect, because the IE filter may fail in IE7, we must use zoom=1 to activate hasLayout. We add some more crafted parameters to expand it. The comments are already very detailed, so I don’t understand and ask me again in the message.

Copy the codeThe code is as follows:

 
function opacity(el){ 
//Required parameters
var node = (typeof el == "string")? (el) : el, 
//Optional parameters
options = arguments[1] || {}, 
//Duration of change
duration =  || 1.0, 
//Transparency at the beginning
from =  || 0.0 , 
//Transparency at end
to =  || 0.5, 
operation = 1, 
init = 0; 
if(to - from < 0){ 
operation = -1, 
init = 1; 
} 
//Internal parameters
//SetTimeout execution interval, unit milliseconds
var frequency = 100, 
//Suppose the number of repeated calls
count = duration * 1000 / frequency, 
// Make the increment of transparency each time
detal = (to - from) /count, 
// Number of times in progress
i = 0; 
var main = function(){ 
setTimeout(function(){ 
if(!+"\v1"){ 
if() = 1;//Prevent filter failure
="alpha(opacity="+ (init * 100 + operation * detal * i * 100).toFixed(1) +")" 
}else{ 
 = (init + operation * detal * i).toFixed(3) 
} 
 = (init + operation * detal * i).toFixed(3) 
i++; 
if(i <= count){ 
setTimeout(, frequency); 
} 
},frequency) 
} 
main(); 
} 

Effect demonstration:

[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]

<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 decide whether to use the default parameters or the parameters we pass in, but in javascript the number 0 or even 0.0 will automatically convert to false. So in the first example, if we pass 0 in to, it will never use this 0, but the default 0.5. Workaround makes it become the string "0". In addition, parameter i is not necessary. We can omit it and use count to be responsible for all loops, but in this way, our thinking has to be reversed. It turns out that it is added, we want to become reduced.

Copy the codeThe code is as follows:

 
function opacity(el){ 
//Required parameters
var node = (typeof el == "string")? (el) : el, 
//Optional parameters
options = arguments[1] || {}, 
//Duration of change
duration =  || 1.0, 
//Transparency at the beginning
from =  || 0.0 , 
//Transparency at end
to = ( &&  + "") || 0.5, 
operation = -1, 
init = 1; 
if(to - from < 0){ 
operation = 1, 
init = 0; 
} 
//Internal parameters
//setTimeout execution time, unit
var frequency = 100, 
//Suppose the number of repeated calls
count = duration * 1000 / frequency, 
// Make the increment of transparency each time
detal = operation * (to - from) /count; 
var main = function(){ 
setTimeout(function(){ 
if(!+"\v1"){ 
if() = 1;//Prevent filter failure
="alpha(opacity="+ (init * 100 + detal * count * 100).toFixed(1) +")" 
}else{ 
 = (init + detal * count).toFixed(3) 
} 
count--; 
if(count + 1){ 
setTimeout(, frequency); 
} 
},frequency) 
} 
main(); 
} 

Further optimization and use prototype sharing methods.

Copy the codeThe code is as follows:

 
function Opacity(el){ 
var node = (typeof el == "string")? (el) : el, 
options = arguments[1] || {}, 
duration =  || 1.0, 
from =  || 0.0 , 
to = ( &&  + "") || 0.5, 
operation = -1, 
init = 1; 
if(to - from < 0){ 
operation = 1, 
init = 0; 
} 
var frequency = 100, 
count = duration * 1000 / frequency, 
detal = operation * (to - from) /count; 
(node,init,detal,count,frequency); 
} 
 = { 
main : function(node,init,detal,count,frequency){ 
setTimeout(function(){ 
if(!+"\v1"){ 
if() = 1;//Prevent filter failure
="alpha(opacity="+ (init * 100 + detal * count * 100).toFixed(1) +")" 
}else{ 
 = (init + detal * count).toFixed(3) 
} 
 = (init + detal * count).toFixed(3) 
count--; 
if(count + 1){ 
setTimeout(, frequency); 
} 
},frequency) 
} 
} 

Demo code:

[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]