Затухание / затухание текста в IE - PullRequest
Новая
       7

Затухание / затухание текста в IE

1 голос
/ 19 мая 2010

У меня возникла проблема, и я нашел быстрое решение: постепенно увеличивать и уменьшать количество цитат. Мое решение работает так, как я хочу, в любом браузере, кроме любого из IE. Единственная проблема с IE состоит в том, что текст не исчезает и не исчезает; текст просто появляется.

Мне кажется, я сталкивался с подобной проблемой раньше, когда пытался динамически изменить filter:alpha(opacity=xx) элемента.

Любая помощь очень ценится! 

<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>

Ответы [ 2 ]

2 голосов
/ 19 мая 2010

Код здесь работает для меня в IE 8, Firefox и Safari:

http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation

Это стало таким клише, но да, вы должны также рассмотреть возможность использования библиотеки, такой как jQuery, которая может сделать это в 1 строку.

Пример jQuery: http://viralpatel.net/blogs/2009/01/fadein-fadeout-fade-out-effect-in-html-text-div-using-jquery.html

1 голос
/ 19 мая 2010

Установите значение в массив фильтра, а не в элемент стиля. Тогда IE сможет идти в ногу. 

if (elm.filters)
elm.filters[0].opacity=value
...