Simple Fade Out Using Javascript

What is the simplest way?

[BadBoyMcCoy]

Hi

Basically I have a few links on the page, and when you click any of them I want to set a div's alpha to 1 and give it a class. Then gradually decrease the alpha over say 1 second until it has 0 alpha.

Once it reaches 0 alpha I would like to be able to add new CSS class as well.

I can probably work the class bit out but I'm really struggling with the fading of the div. I'm quite new to JavaScript so would really appreciate any help at all.

TIA
McCoy

[Fotiman]

You may want to investigate CSS transitions, which will be smoother. There's a good article here about using transitions, with jQuery's animate method as a fallback for browsers that don't support transitions yet (IE8 and IE9).
[msdn.microsoft.com...]

[drhowarddrfine]

for browsers that don't support transitions yet (IE8 and IE9).

IE8 and IE9 will NEVER have transitions.

I would be very careful about any articles about current practices from Microsoft as their articles tend to be backwards, old or make sideways statements and there are far, far better articles anywhere else.

I was going to quote one of the lines I saw in that article when I noticed two things. 1) It is a year and a half old and its warnings about support for CSS transitions does not apply to any modern browser (that is, the warnings only apply to IE) and 2) it's written by Addy Osmani which means, for an almost 2-year old article, it has creditability.

In any case, it's always better to look for such things from Mozilla's MDN or even find articles like this one from John Resig:

[ejohn.org...]
[developer.mozilla.org...]

[Fotiman]

Note, I didn't mean to imply that IE8 or IE9 would EVER support transitions. :) Bad grammar choice on my part.

Yeah, it was because that article was from Addy Osmani that I posted it.

Side note... that article by John Resig is 4 years old, so the one by Addy probably contains more up to date information.

[drhowarddrfine]

Ew! You're right. I thought John's was the same age.