Jquery animation "opacity" au survol de liste ul li ul

Bonjour,
le forum répondant à mes quelques interrogations, je bloque sur un problème depuis quelques jours...

Je cherche à animer l'opacité de mon sous-menu :
1° - en survolant la puce, mon sous-menu apparraît progressivement - inversement en quittant la puce (sans avoir survolé le sous-menu)
2° - en quittant le sous-menu, mon sous-menu doit s'effacer SI je ne suis pas retourner sur la puce

voilà le début de code que j'ai (Je n'arrive pas à trouver la combine pour que le 1° fonctionne...)

mon html :

<div class='node' style='line-height:12px; position:absolute; left:100px; top:20px;'>
  <ul>
    <li><a href=''><span style='font-size:24px;'>&bull;</span></a>
          <ul style='border: solid 1px #ff00ff;'>
               <li><a href=''>Item 3a</a></li>
               <li><a href=''>Item 3c</a></li>
          </ul>
    </li>
  </ul>
</div>

mon css :

.node{
  text-align:left;
}
.node ul {
  padding:0;
  margin:0;
  list-style-type:none;
  width:100%;
}               
.node li {
  position:relative;
  height:24px;
}               
.node a, .node a:visited {
  display:block; 
  text-decoration:none;
  height:24px;
  line-height:24px;
  width:25px;
  color:#fff;
  text-indent:5px;
}
.node li li a {
  width:149px;
}
.node ul {
  width : auto;
}
.node ul ul { 
  visibility:hidden;
  position:absolute;
  top:0;
  left:25px; 
}
.node ul li:hover ul{
  visibility:hidden;
  opacity: 0;       
}

Mon javascript :

$(document).ready(function(){
$(".node ul li a").hover(function() {
    $(this).next().css({visibility:'visible'});
    $(this).next().stop().animate({ opacity: 1}, 400);
  },function() {
 }); 


$(".node ul li ul").hover(function() {   
   $(this).css({opacity:1});
   $(this).css({visibility:'visible'});
  },function() {
   $(this).animate({ opacity: 0}, 800, function(){ $(this).css("visibility","hidden"); });    
 });
};

Modifié par benvet (23 Feb 2012 - 10:56)