I am really squeezing my head to make the simple fade in and fade out of the background image work only with javascript without JQuery and CSS3. I know how easy is to call a fadeIn() and fadeOut() in Jquery. Unfortunately in my project I am working, they don't support Jquery. I want to support the animation from IE6 for your info.

On click of the links the corresponding background of the div to be faded in and out from the previously existing background. I am trying to make it work based on setinterval but could not do it.

function handleClick(evt){

    var element = document.getElementsByClassName(evt.target.id);

    fade(element);



}

 function fade(element) {

    var op = 1;  // initial opacity

    var timer = setInterval(function () {

        if (op <= 0.1){

            clearInterval(timer);

            element.style.display = 'none';

        }

        element.style.opacity = op;

        element.style.filter = 'alpha(opacity=' + op * 100 + );

        op -= op * 0.1;

    }, 50);

}

​

http://jsfiddle.net/meetravi/2Pd6e/4/