I have been trying all afternoon to achieve an effect where the background colour of a hovered on link in a list fades out slowly when the mouse rolls off it.

I have found a few tutorials online which are similar to what I want to achieve (but none that are exactly right) like these:



but despite playing around with them for hours I have had no luck so far... in fact I have yet to have anything have any effect on my links whatsoever!

Here's the file I am working on


I want the background colour of the links in the list to appear immediately on rollover but to fade out over about a second on roll out. I want them to continue fading even when a different link is rolled over so if you whizz up and down the list of links you get a nice gradiated effect with each link's background colour at a slightly different stage of fading out.

I read that I need the jQuery color plugin to do this but I am not sure if that info is up to date as the links to it are dead on the query site - so I also tried with the core ui plugin which I hope I got right when I went through the custom build process on the query site...

I have had more success with a CSS3 transitions approach which can be seen here:


but this is not ideal for a couple of reasons - firstly as it is css3 it only works in modern webkit browsers and secondly there seems no way to have only a fade out without a fade in - in this example I would like the fade out to be longer but if I increase the transition time from 0.3s then the fade in becomes too long and it feels a bit clunky and unresponsive.

I would really appreciate it if someone could help me get this working - thanks