Question

我发现JQuery真的很慢，所以我决定创建自己的fadeIn和fadeOut函数，这样我就可以像jquery一样轻松调用它们。我已经完成了一半，但不幸的是，当我点击fadeIn时，它会不停地重新进入，当我点击fadeOut时它会不断退出。

我尝试使用display：none;和显示：javascript中的块样式，但只适用于淡出。它现在完全适用于IE6 + 7 !!问题出在CSS内部。如果有人可以帮助javascript现在我真的很感激。

这是我的代码：

HTML：

<html>
    <body>
        <a id="fadeI">FadeIn</a>
        <a id="fadeO">FadeOut</a>
        <div id="message"></div>
    </body>
</html>

CSS：

   <style>
#fadeI, #fadeO{
cursor: pointer;
margin-left: 10px;  
zoom: 1;
    }
#message{
        background: url('pictures/iphone1.png') no-repeat;
        width:90px;
        height: 158px;
        z-index: 1;}

</style>

Javascript：

<script>
    window.onload = function() {
        function fadeOut(id, seconds) {
            var opacity = 1;
            var interval = seconds * 10;
            var outListener = null;
            outListener = setInterval(function() {
                opacity = fadeOutInterval(opacity, id, outListener);
            } , interval);
        }

        function fadeOutInterval(opacity, id, outListener) {
        opacity = opacity - 0.1;
        setOpacity(id, opacity);
        if(opacity < 0) {
            clearInterval(outListener);
               //document.getElementById(id).style.display = 'none';
        }
        return opacity;
        }

        function fadeIn(id, seconds) {
            var opacity = 0;
            var interval = seconds * 10;
            var InListener = null;
            InListener = setInterval(function() {
                opacity = fadeInInterval(opacity, id, InListener);
            } , interval);
        }

        function fadeInInterval(opacity, id, InListener) {
            opacity = opacity + 0.1;
            setOpacity(id, opacity);    
            if(opacity > 1) {
            clearInterval(InListener);
        }   
        return opacity;
        }

        function setOpacity(id, level) {
        document.getElementById(id).style.opacity = level;
            document.getElementById(id).style.MozOpacity = level;
        document.getElementById(id).style.KhtmlOpacity = level;
            document.getElementById(id).style.filter = "alpha(opacity="
                + (level * 100) + ");";
        }

        //delay fadeOut
        setTimeout(delay, 3000);
        function delay(){
            fadeOut('message', 1)
            clearTimeout(delay,1);
            return false;
            }


        //Call functions
        var fadeI = document.getElementById('fadeI');
        var fadO = document.getElementById('fadeO');

        fadeI.onclick = function() {
            fadeIn('message', 1);
        };

        fadeO.onclick = function() {
            fadeOut('message', 1);
        };
    };
</script>

Answer 1

演示 http://so.devilmaycode.it/javascript-fadein-fadeout-keeps-refading-not-working-on-ie6-7-no-jquery/

<script>
    window.onload = function() {

        var outListener = 0, InListener = 0, opacity = 1;

        function fadeOut(id, seconds) {
            if(gid(id).style.display != 'none' || gid(id).style.display == ''){
                outListener = setInterval(function() {
                    opacity -= 0.1;
                    setOpacity(id);
                    if(opacity < 0) {
                        clearInterval(outListener);
                    }
                }, seconds);
            }
        }

        function fadeIn(id, seconds) {
            if(gid(id).style.display == 'none'){
                InListener = setInterval(function() {
                    opacity += 0.1;
                    setOpacity(id);
                    if(opacity > 1) {
                        clearInterval(InListener);
                    } 
                }, seconds);
            }
        }
        function setOpacity(id) {
            document.getElementById(id).style.opacity = opacity;
            document.getElementById(id).style.MozOpacity = opacity;
            document.getElementById(id).style.KhtmlOpacity = opacity;
            document.getElementById(id).style.filter = 'alpha(opacity="'+ (opacity * 100) + '");';
            document.getElementById(id).style.display = (opacity<0) ? 'none' : 'block';
        }

        function gid(id){
            return document.getElementById(id);
        }

        var fadeI = gid('fadeI');
        var fadO = gid('fadeO');

        fadeI.onclick = function() {
            fadeIn('message', 1000);
        };

        fadeO.onclick = function() {
            fadeOut('message', 1000);
        };
    };
</script>

Answer 2

保持布尔值可能是一个好主意：＆＃34; isfaded＆＃34;并根据需要进行更新。

与你一起IE -issue你可能首先要查看它是否支持html5，所以看看这里：http://html5test.com/

Answer 3

基于@malle建议，尝试一下这个

        var isFadedIn = false;

        //Call functions
        var fadeI = document.getElementById('fadeI');
        var fadO = document.getElementById('fadeO');

        fadeI.onclick = function() {
              if(!isFadedIn){
              fadeIn('message', 1);
              isFadedIn = true;
              }    

        };

        fadeO.onclick = function() {
           if(isFadedIn){
            fadeOut('message', 1);
            isFadedIn = false;
           } 
        };

Javascript fadeIn fadeOut不断重写（没有JQuery！）

3 个答案: