help with adding fade in/out effect to simple show/hide div script

hi guys,

i'm trying to get a div to fade in and fade out on image mouseover/mouseout, the below code is working for purposes of show/hide the div, but it's instant, and i cannot figure out how to fade. i'm very new to javascript. greatly appreciate any help someone can give me

the following is my code in header:

<script type="text/javascript" language="JavaScript">
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
</script>

the following is my code at the image:

<a onmouseover="ReverseContentDisplay('uniquename'); return true;" onmouseout="javascript:ReverseContentDisplay('uniquename')"><asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/layout3_19.gif" /></a></td>

the following is the code at my div:

<div id="uniquename" style="display:none;">
Content goes here.
</div>

 

Using a JS library for stuff like this makes things a lot simpler.

Here's how to do it with YUI, http://developer.yahoo.com/yui/examples/container/container-effect.html

You can probably pick any of the popular libraries and there will be an easy way to achieve want you want.

Here's a list of other libraries, http://en.wikipedia.org/wiki/List_of_web_application_frameworks#JavaScript

EXT, JQuery, Mootools, script.aculo.us and YUI are probably the most popular ones.

 

With jQuery it is as simple as:

$('#' + id).show('slow);
$('#' + id).hide('slow);