Fade in using plain javascript

Question

Trying to do a simple fade in using the opacity property of an h1 element. I'm learning javascript, so would like to try this using plain javascript (yes, I know it is much easier using jQuery).

Pasting only relevant snippets:

<body onload="fadeIn()">
    ...
    <div class = "container">

        <div class = "row">
            <div class = "col-md-3">
                <img class = "img-responsive" src="icons/Website_Logo.png">
            </div>

            <div class = "col-md-9 page-header">
                <h1 id="welcomeHeader" style="opacity:0">
                    Welcome to the world!
                </h1>
            </div>
        </div>

    </div>
    ...
    <script>
        function fadeIn() {
            var el = document.getElementById("welcomeHeader");
            var op = parseFloat(el.style.opacity);

            var timer = (function () {
                if(op >= 1.0)
                    clearInterval(timer);

                op += 0.1;
                el.style.opacity = op;
            }, 50);
        }

    </script>
</body>

Help is much appreciated! Thanks!

jsFIDDLE

where is the `setInterval`? `var timer = setInterval(function() {...` — huocp, Jul 22 '14 at 06:52
i hope this will help you.. http://stackoverflow.com/questions/5104053/fade-effect-using-javascript-no-jquery — Devendra Soni, Jul 22 '14 at 06:52

score 1 · Answer 1 · answered Jul 22 '14 at 06:53

You need to call the setInterval function first in order to invoke a timer. Rest is fine. Here is a working fiddle

Code Snippet:

    function fadeIn() {
        var el = document.getElementById("welcomeHeader");
        var op = parseFloat(el.style.opacity);

        var timer = setInterval(function () {
            console.log('here');
            if(op >= 1.0)
                clearInterval(timer);

            op += 0.1;
            el.style.opacity = op;
        }, 50);
    }

score 0 · Answer 2 · answered Jul 22 '14 at 06:51

You need to change your function to use setInterval like so:

var timer = setInterval(function () { // notice the setInterval added.
    if(op >= 1.0)
        clearInterval(timer);

    op += 0.1;
    el.style.opacity = op;
}, 50);

Notes:

I give you this answer to help you LEARN javascript as you mentioned, otherwise, it would be better done with pure css of course. Also, make sure your opacity is set to 0 in your css as a starting point.

mechalynx · Answer 3 · 2014-07-22T07:00:53.610

You don't need a timer for this - all you need to do is change the class. Here's an example:

the CSS:

element{
    /* whatever styles you have */
}

element_faded{
    transition: opacity .5s;
    opacity: 50%; /* or whatever values you want */
}

the javascript

var element = document.getElementById('element');

// in order to trigger the fade, just change the class

element.className = "element_faded";

In the transition will happen between the values of the original and new class, so if you want a fade-in, have the original opacity be 0% and the new one be 100% or something higher than zero, depending on what you want the final opacity to be. Also, remember that the transition characteristics are determined by the transition attribute in the new class.

Doing this without CSS will just make things more complicated unless you need to do something more sophisticated than just plain fading in or out. If that's the case, then use setInterval or perhaps even something like requestAnimationFrame if you're feeling adventurous.

Honestly, this isn't really the kind of thing you need to learn when first learning javascript. Eventually this will be really easy once you get some confidence under your belt doing things that work more easily in javascript (setTimeout and the like can have their own weird caveats). Try to set a meaningful, practical goal and fulfill it first, using whatever mix of javscript/css/html you can and you'll soon have the basics down well enough to find things like this obvious.

@MichalLeszczyk I don't see your point. CSS3 is quite old by now as are transitions. This stuff is widely supported and is part of standard practices in web development. — mechalynx, Jul 22 '14 at 08:25
I'm just pointing out that this solution, being absolutelty the best for modern browsers, in older ones (IE9 and older) might not be supported at all, and that fact should be taken under consideration (which browers does the author need to support?). [CSS transitions compatibility table](http://caniuse.com/css-transitions). — Michal Leszczyk, Jul 22 '14 at 08:31
@MichalLeszczyk perhaps, but he's just learning javascript, not doing production-level work, so I'd think learning the standard way and leaving the _exception_ (read: IE and all the pain it spawns) later when he's comfortable with the standard solutions. Granted, this isn't _pure_ javascript technically, but again, it's best to know the standard approaches rather than try aimlessly to achieve some nebulous "standard" of purity in these things. The pointer is good, it's just that you should be specific about what you mean, or a new person won't understand why you mention CSS3 at all. — mechalynx, Jul 22 '14 at 08:35

Fade in using plain javascript

3 Answers3

Notes: