Javascript fade in fade out without Jquery and CSS3

javascript

Solution

`getElementById` givies you one element (or null), `getElementsByClassName` gives an array.

function handleClick(evt){
    var element = document.getElementById(evt.target.id);
    fade(element);

}

You seem to aim for usage of ID's, so this should answer your needs. I updated the whole thing: IDs

However, you should realize that this method of fading is much more costly than using GPU accelerated transitions.

Update JSfiddle webkit opacity fade

Problem

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/

Original source