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


Tags: javascript,css,xhtml

Problem :

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?



Solution :

Ok, I've worked it out

element.style.opacity = parseFloat(element.style.opacity) + 0.1;

Should be used instead of

element.style.opacity += 0.1;

Same with

element.style.opacity = parseFloat(element.style.opacity) - 0.1;

Instead of

element.style.opacity -= 0.1;

Because opacity value is stored as string, not as float. I'm still not sure though why the addition has worked.


    CSS Howto..

    How do I change the a border-color on rollover?

    How do I link an external css to overwrite bootstrap css for centering elements?

    How to combine jquery codes with similar functions?

    How to stop the css attribute font-size to get override from external style sheet universal selector

    How to inherit the background color of textarea from parent element in Internet Explorer?

    How to overlay “transformed” element?

    CSS how to style a parent item when a textarea is in focus?

    How to extract icon from picture and display it in page? (by javascript or jquery or css)

    CSS: How to prevent div from overlapping parent height or parent border

    How do I detect box-sizing border-box support with Modernizr

    How to define cellspacing in CSS

    How to REALLY control font size in an eBay listing [closed]

    Simple CSS: How to fix display:inline issue

    How do I get rid of an element's offset using CSS?

    how to make the parent width equals the width of all element inside it?

    CSS - How to remove white
    margins

    How to resize image automatically on browser width resize but keep same height?

    css - how to setup image editing page

    How to change active tab to first css

    fa-star () is always yellow, how to make it white?

    How to make a main div appear next to a sidebar

    Email-box shows at “random” place

    How to use one icon from different image files?

    Bootstrap: user agent css styles misbehaving how to solve this

    How to display separate paragraphs in the same area using CSS HTML

    How to get Google menu buttons like styling using CSS

    show image in aspect ratio and all image size same height and width

    How to Scale Down a Large Image Using HTML and/or CSS

    How to select only one child element in CSS?

    How can I ensure that no other text is on the same line as my heading tag?