How can i FADE IN and OUT a list that appears (using the .bind command?

Question

This is the code i'm using. It's to make a list appear on mousenter the list's title. The thing is that it appears and disappears very abruptly. What can i do to make this smoother?

Many thanks for your time!

<script type="text/javascript"> 

var timeout    = 0;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseenter', jsddm_open) 
  $('#jsddm > li').bind('mouseleave',  jsddm_timer)});

document.onclick = jsddm_close; </script>

Answer 1

Your two lines that set visibility:

   ddmenuitem = $(this).find('ul').css('visibility', 'visible');
   ddmenuitem.css('visibility', 'hidden');

Try this instead:

   ddmenuitem = $(this).find('ul').show('slow');
   ddmenuitem.hide('slow');

Aside:

You last few lines could be this. Just a bit neater:

$(document).ready(function(){  
    $('#jsddm > li').mouseover(jsddm_open) 
    $('#jsddm > li').mouseout(jsddm_timer)
    $(document).click(jsddm_close);
});

Or even:

$(document).ready(function(){  
    $('#jsddm > li').hover(jsddm_open, jsddm_timer) 
    $(document).click(jsddm_close);
});