Question

I’m not using JQuery but I know they have functions to do this. I know how to do this in JQuery but I want a pure js solution.

How can I time vary the CSS opacity setting? A unix time stamp has precision to 1000 milliseconds…so that might be one way.

Using clearTimeout and setTimeout would be another way.

What is the best way to do this. I tried looking at JQuery source but could not figure out what they were doing exactly for fadeIn and fadeOut.

Related

How to eliminate unused arguments in an opacity fade?

Answer 1

Here’s an animation function using setTimeout. You can see it work here: http://jsfiddle.net/jfriend00/GcxdG/.

function toggleOpacity(id) {
    var el = document.getElementById(id);
    if (el.style.opacity == 1) {
        fadeObject(el, 1, 0, 2000)
    } else {
        fadeObject(el, 0, 1, 2000)
    }
}

function fadeObject(el, start, end, duration) {
    var range = end - start;
    var goingUp = end > start;
    var steps = duration / 20;   // arbitrarily picked 20ms for each step
    var increment = range / steps;
    var current = start;
    var more = true;
    function next() {
        current = current + increment;
        if (goingUp) {
            if (current > end) {
                current = end;
                more = false;
            }
        } else {
            if (current < end) {
                current = end;
                more = false;
            }
        }
        el.style.opacity = current;
        if (more) {
            setTimeout(next, 20);
        }
    }
    next();
}

Note: this is not yet adapted for older IE versions which don’t respond to the opacity style and need to have their opacity set via an IE-specific filter setting.