How to do fade-in and fade-out with JavaScript and

2019-01-01 05:24发布

站内问答 / JavaScript
841 10 6

I want to make an HTML div tag fade in and fade out.

I have some code that fades out, but when I fade in, the opacity of the div stays at 0.1 and doesn't increase.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
    <title>Fade to Black</title>
    <script type="text/javascript">
        //<![CDATA[
        function slidePanel(elementToSlide, slideSource)
        {
            var element = document.getElementById(elementToSlide);

            if(element.up == null || element.up == false) {
                setTimeout("fadeOut(\"" + elementToSlide + "\")", 100);
                element.up = true;
                slideSource.innerHTML = "Bring it down";
            } else {
                setTimeout("fadeIn(\"" + elementToSlide + "\")", 100);
                element.up = false;
                slideSource.innerHTML = "Take it up";
            }
        }

        function fadeIn(elementToFade)
        {
            var element = document.getElementById(elementToFade);

            element.style.opacity += 0.1;
            if(element.style.opacity > 1.0) {
                element.style.opacity = 1.0;
            } else {
                setTimeout("fadeIn(\"" + elementToFade + "\")", 100);
            }
        }

        function fadeOut(elementToFade)
        {
            var element = document.getElementById(elementToFade);

            element.style.opacity -= 0.1;
            if(element.style.opacity < 0.0) {
                element.style.opacity = 0.0;
            } else {
                setTimeout("fadeOut(\"" + elementToFade + "\")", 100);
            }
        }
        //]]>
    </script>
 </head>
 <body>
    <div>
        <div id="slideSource"
              style="width:150px; height:20px;
                    text-align:center; background:green"
             onclick="slidePanel('panel', this)">
            Take It up
        </div>
        <div id="panel"
              style="width:150px; height:130px;
                    text-align:center; background:red;
                    opacity:1.0;">
            Contents
        </div>
    </div>
</body>
</html>

What am I doing wrong and what is the best way to fade in and fade out an element?

10条回答
墨雨无痕
2楼-- · 2019-01-01 06:05

Here's my attempt with Javascript and CSS3 animation So the HTML:

 <div id="handle">Fade</div> 
 <div id="slideSource">Whatever you want images or  text here</div>

The CSS3 with transitions:

div#slideSource {
opacity:1;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;     
transition: opacity 3s; 
}

div#slideSource.fade {
opacity:0;
}

The Javascript part. Check if the className exists, if it does then add the class and transitions. 

document.getElementById('handle').onclick = function(){
    if(slideSource.className){
        document.getElementById('slideSource').className = '';
    } else {
        document.getElementById('slideSource').className = 'fade';
    }
}

Just click and it will fade in and out. I would recommend using JQuery as Itai Sagi mentioned. I left out Opera and MS, so I would recommend using prefixr to add that in the css. This is my first time posting on stackoverflow but it should work fine.

查看更多
0人赞 添加讨论(0) 举报
笑指拈花
3楼-- · 2019-01-01 06:09

why do that to yourself?

jQuery:

$("#element").fadeOut();
$("#element").fadeIn();

I think that's easier.

www.jquery.com

查看更多
0人赞 添加讨论(0) 举报
余欢
4楼-- · 2019-01-01 06:09

I usually use these utility functions. element is the HTML element and duration is the desired duration in milliseconds.

export const fadeIn = (element, duration) => {
    (function increment(value = 0) {
        element.style.opacity = String(value);
        if (element.style.opacity !== '1') {
            setTimeout(() => {
                increment(value + 0.1);
            }, duration / 10);
        }
    })();
};

export const fadeOut = (element, duration) => {
    (function decrement() {
        (element.style.opacity -= 0.1) < 0 ? element.style.display = 'none' : setTimeout(() => {
            decrement();
        }, duration / 10);
    })();
};
查看更多
0人赞 添加讨论(0) 举报
浮光初槿花落
5楼-- · 2019-01-01 06:09

Heres my code for a fade in/out toggle functions.

fadeIn: function (len) {
                var obj = this.e;
                obj.style.display = '';
                var op = 0; 
                var timer = setInterval(function () {
                    if (op >= 1 || op >= 1.0){
                        console.log('done', op)
                        clearInterval(timer);
                    }
                    obj.style.opacity = op.toFixed(1);
                    op += 0.1;
                    console.log(obj.style.opacity);
                }, len);
                return this;
            },
    fadeOut: function (len) {
                var obj = this.e;
                var op = 1; 
                var timer = setInterval(function () {
                    if (op <= 0){
                        clearInterval(timer);
                        console.log('done', op)
                        obj.style.display = 'none';
                    }
                    obj.style.opacity = op.toFixed(1);
                    op -= 0.1;
                    console.log(obj.style.opacity)
                }, len);
                return this;
            },

This was from a jQuery style lib i did. hope it's helpfull. link to lib on cloud9: https://c9.io/christopherdumas/magik_wb

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)