Javascript fade in fade out without Jquery and CSS3

Question

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

Answer 1

Here are my full implementations of fadeIn and fadeOut for cross-browser support (including IE6) which does not require jQuery or any other 3rd-party JS library:

function fadeIn( elem, ms )
{
  if( ! elem )
    return;

  elem.style.opacity = 0;
  elem.style.filter = "alpha(opacity=0)";
  elem.style.display = "inline-block";
  elem.style.visibility = "visible";

  if( ms )
  {
    var opacity = 0;
    var timer = setInterval( function() {
      opacity += 50 / ms;
      if( opacity >= 1 )
      {
        clearInterval(timer);
        opacity = 1;
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 );
  }
  else
  {
    elem.style.opacity = 1;
    elem.style.filter = "alpha(opacity=1)";
  }
}

function fadeOut( elem, ms )
{
  if( ! elem )
    return;

  if( ms )
  {
    var opacity = 1;
    var timer = setInterval( function() {
      opacity -= 50 / ms;
      if( opacity <= 0 )
      {
        clearInterval(timer);
        opacity = 0;
        elem.style.display = "none";
        elem.style.visibility = "hidden";
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 );
  }
  else
  {
    elem.style.opacity = 0;
    elem.style.filter = "alpha(opacity=0)";
    elem.style.display = "none";
    elem.style.visibility = "hidden";
  }
}

As others have said, you need to fix your handleClick to properly select a single element, then pass that element to the fade function (which I named fadeOut for clarity). The default time for a jQuery fade is 400ms, so if you want to mimic that, your call might look like this:

function handleClick( evt )
{
  fadeOut( document.getElementById(evt.target.id), 400 );
}

Answer 2

element.style is undefined because you're not referencing the correct object. Use element[0] for your function call:

function handleClick(evt){     
    var element = document.getElementsByClassName(evt.target.id);
    fade(element[0]);        
}

Fiddle

---

Side note: Using console.log() and some type of developer console (like the one included in Chrome) can work wonders for debugging.

Answer 3

You should really do this via CSS3 since all modern browsers support it, and for older browsers fallback to just using show/hide. Do this by adding a "fadeOut" class or removing it via JavaScript. CSS3 (transitions) handle everything else, including hiding and showing it for older browsers.

Remember: As much as possible, do things in CSS before doing them in JavaScript. Not only is it cleaner and easier to maintain but CSS3 animations render smoother as it often hardnesses the GPU (video card) and not just the CPU. This is especially important on mobile devices but is the standard, modern way for doing it in any device.

See this Opera article for greater detail: http://dev.opera.com/articles/view/css3-show-and-hide/

Answer 4

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

Answer 5

If you do not care about IE7 - IE9, you can use very useful CSS3 transitions, something like this:

    .element {
        -webkit-transition: opacity 0.3s ease;
    }
    .element[faded=true] {
        opacity: 0;
    }

You will get very fast, native fade out effect without jQuery.

UPDATE: Sorry, i hadn't read quiestion title thoroughly.

Answer 6

I'll point you off in the right direction and leave the rest of the coding to you.

This is how the setInterval() function works. It takes a function to execute and then the milliseconds it should run for.

setInterval(function() {
    if(fade(element[0]))
        clearInterval();
}, 50);

I made a JS fiddle for you here It's semicomplete but shows off how you should go about making your fadeout/fadein. This is tested in Chrome on a Mac. Not sure about FF nor IE unfortunately.

Also as several pointed out, when getting stuff by any function that ends with s you can be 100% sure that it gives you an array with elements and thus you have to refer to the element you want as such. In your case its element[0].

Hope I help you further a little ways! :) Good luck!