jQuery Fading Div's

[almo136]

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]

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]

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!