homepage Welcome to WebmasterWorld Guest from 54.211.190.232
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
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?
BadBoyMcCoy




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

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




msg:4547724
 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).
[msdn.microsoft.com...]

drhowarddrfine




msg:4547726
 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:

[ejohn.org...]
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions#Using_transitions_to_make_JavaScript_functionality_smooth

Fotiman




msg:4547727
 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.

drhowarddrfine




msg:4547864
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved