个人中心
gpt4 book ai didi

Javascript fadeIn fadeOut 不断重新淡出(没有 JQuery!)

转载 作者：行者123 更新时间：2023-11-28 01:25:57 25 4
gpt4 key购买 nike

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

我尝试使用显示:无；和 display: javascript 中的 block 样式，但仅适用于淡出。它现在可以在 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>

最佳答案 

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

关于Javascript fadeIn fadeOut 不断重新淡出(没有 JQuery!)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22684984/

25 4 0
文章推荐： html - 内联 block 元素换行时的CSS，父包装器不适合新宽度
文章推荐： c++ - 为什么不同的图像类型需要不同的 dumpbin 选项？
文章推荐： c++ - 错误 : cast to incomplete array type "int []" is not allowed
文章推荐： css - 在 Angular 中更新自定义复选框组件 View
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com