homepage Welcome to WebmasterWorld Guest from 23.23.22.200
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery Fading Div's
almo136




msg:4447912
 11:45 am on May 1, 2012 (gmt 0)

I am trying to write some code which would allow me to hover over various div's on the page and when I do the div would fade slightly (opacity .5). When I move the mouse pointer off the div it would then return to normal (opacity 1.0).

I have tried different bits of code I've found online but the closest I have got is to have them fade in and out but for some reason the div would start flickering when I hovered over it sometimes.

Anyone know how to do this?

Ideally I'd like one function which I could apply to lots of div's when i hover over them.

Thanks!

 

Fotiman




msg:4447937
 1:16 pm on May 1, 2012 (gmt 0)

What sort of browser dependencies to you have? I would consider this to be a progressive enhancement, therefore you might be able to avoid scripting altogether and just use CSS3 transitions:

div {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
div:hover {
opacity: 0.5;
}

But it depends on how old of a browser do you need to support.

almo136




msg:4447986
 2:37 pm on May 1, 2012 (gmt 0)

You're right, it is progressive enhancement so it doesn't matter that it doesn't work on older browsers. Your solution works perfect.

Hadn't realised you could set a time for the transitions.

Thanks!

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