Toggle button fade in/out effect - Jquery

So I have a list that I will fade in each element of the UL one at a time. Like so,

$j(function(){
 $j('#access-navi .sub').click(function(){
  $j(this).find('ul li a').each(function(i){
   $j(this).delay(i*150).fadeIn(500);
  });
 });
});

This works to diplay them but when I try to make it so that when I click on the button again, it doesn't do anything.

$j(function(){
 $j('#access-navi .sub').click(function(){
  $j(this).find('ul li a').each(function(i){
   $j(this).delay(i*150).fadeToggle(500);
  });
 });
});

I tried to change it to this, but that doesn't work..

How do I make the button that fades in also fade out upon a 2nd click.

HTML:

<div id="access-navi" role="navigation">
   <ul>
    <li><a href="">Home</a></li>
    <li class="sub"><a href="#">Code</a>
     <ul>
      <li><a href="">Html.Css</a></li>
      <li><a href="">Java</a></li>
     开发者_如何学JAVA <li><a href="">jQuery</a></li>
      <li><a href="">Php</a></li>
     </ul>
    </li>
   </ul>
   <div class="clear"></div>
  </div>

I believe you want something like this. The toggle function accepts two or more functions as parameters and executes the functions in alternating fashion when clicked. So first click it fades in, second click it fades out, third click it fades in, fourth click out, etc.

$j(function(){
   $j('#access-navi .sub').toggle(function(){
       $j(this).find('ul li a').each(function(i){
           $j(this).delay(i*150).fadeIn(500);
       });
   }, function() {
       $j(this).find('ul li a').each(function(i){
           $j(this).delay(i*150).fadeOut(500);
       });
   });
});