homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Simple Fade Out Using Javascript
What is the simplest way?

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


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.




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

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).


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

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:



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

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.


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

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved