Fading in/Fade out text in IE
I had a problem and whipped up a quick solution: fade-in and fade-out 开发者_如何学Ca series of quotations. My solution works just as I want it in every browser except any of the IEs. The only problem with the IEs is that the text does not fade in and fade out; the text simply pops into existence.
I believe I've run into a similar problem before when trying to dynamically change the filter:alpha(opacity=xx) of an element.
Any help is greatly appreciated!
<html>
<head>
<style>
.fadetext{
background:green;
border:1px solid red;
height:50px;
width:500px;
}
.fadetext div{
background:yellow;
}
</style>
<script type="text/javascript">
var CI_common = {
C:function(cls,elm){
if(!elm) elm = document;
if(document.getElementsByClassName){
return elm.getElementsByClassName(cls);
}else{
var t = [];
var o = elm.getElementsByTagName("*");
var r = new RegExp("(^|\\s)" + cls + "($|\\s)");
for(var i=0;i<o.length;i++){
if(o[i].className.match(r)) t.push(o[i]);
}
return t;
}
},
eventAdd:function(obj,evt,func){
if(obj.addEventListener){
obj.addEventListener(evt,func,false);
}else if(obj.attachEvent){
obj["x" + evt + func] = func;
obj[evt + func] = function(){
obj["x" + evt + func](window.event);
}
obj.attachEvent("on" + evt,obj[evt + func]);
}
}
}
var CI_fadetext = {
init:function(){
var c = CI_common.C("fadetext"); // Simply a getElementsByClassName function
for(var i=0;i<c.length;i++){
c[i].style.overflow = "hidden";
var kids = c[i].getElementsByTagName("div");
for(var j=0;j<kids.length;j++){
kids[j].style.display = "none";
kids[j].style.filter = "alpha(opacity=0)";
kids[j].style.opacity = "0";
(function(obj,index,len){
obj.fadetexttimeout = setTimeout(function(){
CI_fadetext.fade(obj,true);
obj.fadeininterval = setInterval(function(){
CI_fadetext.fade(obj,true);
},5000*len)
},5000*index);
setTimeout(function(){
CI_fadetext.fade(obj,false);
obj.fadeoutinterval = setInterval(function(){
CI_fadetext.fade(obj,false);
},5000*len)
},5000*index+4400);
})(kids[j],j,kids.length);
}
}
},
fade:function(elm,dir){
function fade(start){
start = (dir ? start + 10 : start - 10);
elm.style.filter = "alpha(opacity=" + start + ")";
elm.style.opacity = start/100;
document.getElementById("output").innerHTML = elm.style.filter;
if(start > 100 || start <0){
elm.style.display = (dir ? "" : "none");
elm.style.filter = "alpha(opacity=" + (dir ? 100 : 0) + ")";
elm.style.opacity = (dir ? 1 : 0);
}else elm.fadetexttimeout = setTimeout(function(){fade(start);},50);
}
if(dir){
elm.style.display = "";
fade(0);
}else fade(100);
}
}
CI_common.eventAdd(window,"load",CI_fadetext.init); // Just a window.onload level 2 event listener
</script>
</head>
<body>
<div id="output"></div>
<div class="fadetext">
<div>AAAA</div>
<div>BBBB</div>
<div>CCCC</div>
<div>DDDD</div>
<div>EEEE</div>
</div>
</body>
</html>
The code here works for me in IE 8, Firefox, and Safari:
http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation
It's become so cliche but yes you should also consider using a library like jQuery which can do this in 1 line.
A jQuery example: http://viralpatel.net/blogs/2009/01/fadein-fadeout-fade-out-effect-in-html-text-div-using-jquery.html
Set the value to the filter array rather than the style element. Then IE be able to keep up.
if (elm.filters)
elm.filters[0].opacity=value
加载中,请稍侯......
精彩评论