Javascript fadeIn fadeOut 不断刷新（没有 JQuery！）答案

【问题标题】：Javascript fadeIn fadeOut keeps refading (No JQuery!)Javascript fadeIn fadeOut 不断刷新（没有 JQuery！）
【发布时间】：2014-04-01 18:45:41
【问题描述】：

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

我尝试使用显示：无；和 display: 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>

【问题讨论】：

您不必在window.onload中定义函数，您可以在外部进行，以便全局访问它们
我试过了，但是没用..
我猜你在setOpacity 中遇到了错误，而且你的时间间隔永远不会被清除。
我没有看到任何错误...还有其他建议/答案吗？
我知道这不会解决您的 JS 问题，但我强烈建议您在 CSS 中进行不透明度转换。如果不出意外，您将获得更好的性能。

标签： javascript jquery html fadein fadeout

【解决方案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>

【讨论】：

您没有正确阅读我的问题。如果我想使用 JQuery，我不会经历这一切。我发现 JQuery 真的很慢。我只是想使用纯javascript。我知道 JQuery 是如何工作的。
谢谢你，但它什么也没做......你确定它有效吗？即使在 chrome 中，它现在也不适合我......
非常感谢人！只剩下一个问题..当我点击淡出时它基本上隐藏它而不淡出然后当我重新点击淡出它工作时，然后淡出工作完美
修复了上面所说的问题
gid 函数在返回之前需要检查元素是否存在。类似 if ( element exists ) go on..

【解决方案2】：

保留一个布尔值 :"isfaded" 并在必要时更新它可能是个好主意。

如果是 IE 问题，您可能首先要查找它是否支持 html5，因此请看这里：http://html5test.com/

【讨论】：

是的，午饭后我会，好吗？但是还有一个问题，你为什么不直接使用 css3 来淡化？这要容易得多（当然对于旧浏览器来说这是废话）w3schools.com/css/css3_animations.asp
非常感谢伙计。我将等待。我知道但不幸的是我必须支持 IE7，有时甚至是 IE6：/ 我知道这很糟糕，但我能做什么。这不是我的决定……

【解决方案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;
           } 
        };

【讨论】：

几乎在那里...但是现在如果我最初单击淡出它不会做任何事情，当我最初单击淡入时它会闪烁，当我重新单击淡入和淡出时它会完美运行..