JavaScript: implementing the fadeIn() and fadeOut() methods without jQuery

Implementing the fadeIn() and fadeOut() methods in pure JavaScript without using jQuery requires the knowledge of time frames created during the animation process. Our animation will simply change the opacity of an element from 100% to 0 and from 0 to 100%. Each animation frame will receive a numeric value between our starting and end values.

We need an object that will have the following members:

• An easing object which will store our easing methods.
• An animation method which will run the animation.
• The fadeIn() and fadeOut() methods.

Here's our object:

(function() {
    var FX = {
        easing: {
            linear: function(progress) {
                return progress;
            },
            quadratic: function(progress) {
                return Math.pow(progress, 2);
            },
            swing: function(progress) {
                return 0.5 - Math.cos(progress * Math.PI) / 2;
            },
            circ: function(progress) {
                return 1 - Math.sin(Math.acos(progress));
            },
            back: function(progress, x) {
                return Math.pow(progress, 2) * ((x + 1) * progress - x);
            },
            bounce: function(progress) {
                for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
                    if (progress >= (7 - 4 * a) / 11) {
                        return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
                    }
                }
            },
            elastic: function(progress, x) {
                return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * x / 3 * progress);
            }
        },
        animate: function(options) {
            var start = new Date;
            var id = setInterval(function() {
                var timePassed = new Date - start;
                var progress = timePassed / options.duration;
                if (progress > 1) {
                    progress = 1;
                }
                options.progress = progress;
                var delta = options.delta(progress);
                options.step(delta);
                if (progress == 1) {
                    clearInterval(id);
                    options.complete();
                }
            }, options.delay || 10);
        },
        fadeOut: function(element, options) {
            var to = 1;
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to - delta;
                }
            });
        },
        fadeIn: function(element, options) {
            var to = 0;
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to + delta;
                }
            });
        }
    };
    window.FX = FX;
})()

Our time frame is defined by the progress variable. This value is obtained from the division between the time elapsed and the total duration of our animation. We'll use this value in our easing methods as well. The animate() method will be later applied to the fadeIn() and fadeOut() methods by simply changing the target value which is 1 or 0 (to) depending on the animation type.

The step() method is used to adjust the opacity's value on each time frame. When an element is shown, this method will add the delta parameter to the current opacity's value. Conversely, when an element is hidden such a parameter will be subtracted from the current opacity's value.

An example:

document.getElementById('in').addEventListener('click', function() {
    FX.fadeIn(document.getElementById('test'), {
        duration: 2000,
        complete: function() {
            alert('Complete');
        }
    });
}, false);


document.getElementById('out').addEventListener('click', function() {
    FX.fadeOut(document.getElementById('test'), {
        duration: 2000,
        complete: function() {
            alert('Complete');
        }
    });
}, false);​

[view-example url="http://jsfiddle.net/gabrieleromanato/cMp7s/"]