javascript fade animations

Question

i want a certain DOM element to fade into view in my script. i tried using the timeout feature but couldnt get it to work.

hover.addEventListener('mouseover',function () {Core.addClass(cpanel,"on");},false);

please tell me how to implement a fade-in effect for this. please dont recommend jquery or any other framework.

Answer 1

Can you provide markup to go with your JS, so we know what we're looking at?

Also, if you don't want to use jQuery or another framework, you can still look at their implementations to see how to make this kind of thing work. Fading is a notoriously difficult thing to implement cross-browser because of IE6's spotty transparency support.

Answer 2

So many excellent Javascript developers have written animation functions, you'd really do yourself a favor (and your viewers) to use theirs. People are suggesting jQuery, which is great. MooTools is another great alternative.

However, if you want a nudge in a direction of how to write animation in Javascript, I cooked something up here real fast. Note that there's been no cross-browser testing, I'm sure it doesn't work in IE6 (IE7 even?). Nor would I want to, I appreciate the code others have already tested for me.

This is just an idea of how you could do so with native Javascript:

function fadeIn(el, speed) {
    el.style.opacity = 0;
    var interval = setInterval(function(){
     el.style.opacity = parseFloat(el.style.opacity) + 0.1;
     if(el.style.opacity == 1.0) {
      clearInterval(interval);
     }
    },speed / 10);
}