Native js implements fadein and fadeout effect_javascript skills-JS Tutorial-php.cn

Native js implements fadein and fadeout effect_javascript skills

WBOY

Release： 2016-05-16 16:46:06

Original

1977 people have browsed it

Function attributes for setting the transparency of DOM nodes in js: filter= "alpha(opacity=" value ")" (compatible with IE) and opacity=value/100 (compatible with FF and GG).

Let’s first look at the compatibility code for setting transparency:

Copy the code The code is as follows:

 
function setOpacity(ele, opacity) { 
if (ele.style.opacity != undefined) { 
///Compatible with FF, GG and new version IE 
ele.style.opacity = opacity / 100; 

} else { 
///Compatible with older versions ie 
ele.style.filter = "alpha(opacity=" opacity ")"; 
} 
} 

Some friends write like this:

Copy the code The code is as follows:

 
function setOpacity(ele, opacity) { 
if (document.all) { 
///Compatible with ie 
ele.style.filter = "alpha(opacity=" opacity " )"; 
} 
ele { 
///Compatible with FF and GG 
ele.style.opacity = opacity / 100; 
} 
} 

I want to say that there is a problem when running under IE10. There is no response after clicking. Because IE10 supports the opacity attribute but not filter, this method is not advisable.

fadein function code:

Copy code The code is as follows:

 
function fadein (ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = count < 2 ? (opacity / count) : (opacity / count - 1); 
var timer = null; 
timer = setInterval(function() { 
if (v < opacity) { 
v = avg; 
setOpacity (ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
} 

fadeout Function code:

Copy code The code is as follows:

 
function fadeout(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = (100 - opacity) / count; 
var timer = null; 
timer = setInterval(function() { 
if (v - avg > opacity) { 
v -= avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
} 

The following is a demo example:

Copy code The code is as follows:

If you have any better implementation, please leave a message. . .