Welcome to WebmasterWorld Guest from 54.163.40.152

Forum Moderators: open

Message Too Old, No Replies

Simple Fade Out Using Javascript

What is the simplest way?

     

BadBoyMcCoy

1:58 am on Feb 22, 2013 (gmt 0)

5+ Year Member



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

2:39 am on Feb 22, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

3:08 am on Feb 22, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

3:22 am on Feb 22, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

2:31 pm on Feb 22, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month