| 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!
|
|
|
