Jquery fade in fade out on hover

Hi I have this site http://bit.ly/9s6G73

and would like to implement a fade in fade out effect on hover in the ‘Our News’ section, so when I hover over a news item the grey background of that box fades in slowly, how can I do this?


If you use jQuery, you can achieve this effect in all major browsers incredibly easily. Here’s a basic example:

<!DOCTYPE html>
<title> </title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

<div id='hover' style="height: 30px; width: 100px; background: #0C0;">Hover here!</div>
<div id='effect' style="height: 100px; width: 100px; display: none; background: #00C;"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

More information can be found here:
Use of Hover: http://api.jquery.com/hover/
Use of visual effects: http://api.jquery.com/category/effects/