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() {... — user1375096
– user1375096, Commented Jul 22, 2014 at 6:52
i hope this will help you.. stackoverflow.com/questions/5104053/… — Devendra Soni
– Devendra Soni, Commented Jul 22, 2014 at 6:52

V31 · Accepted Answer · 2014-07-22 06:53:54Z

1

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);
    }

answered Jul 22, 2014 at 6:53

V31

7,6643 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

webkit · Accepted Answer · 2014-07-22 06:51:32Z

0

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.

answered Jul 22, 2014 at 6:51

webkit

3,3691 gold badge19 silver badges19 bronze badges

Comments

mechalynx · Accepted Answer · 2014-07-22 07:00:53Z

0

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.

edited Jul 22, 2014 at 7:00

answered Jul 22, 2014 at 6:51

mechalynx

1,3021 gold badge11 silver badges25 bronze badges

4 Comments

Michal Leszczyk Over a year ago

Note, that transitions came in CSS3.

mechalynx Over a year ago

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

Michal Leszczyk Over a year ago

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.

mechalynx Over a year ago

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

Collectives™ on Stack Overflow

Fade in using plain javascript

3 Answers 3

Comments

Notes:

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Notes:

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related