Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

jQuery Fading Div's



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

5+ Year Member

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.



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

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

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.


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

5+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month