1

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>
      <li><a href="">jQuery</a></li>
      <li><a href="">Php</a></li>
     </ul>
    </li>
   </ul>
   <div class="clear"></div>
  </div>
chasethesunnn
  • 2,149
  • 5
  • 25
  • 42

1 Answers1

0

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);
       });
   });
});
Devin Burke
  • 13,642
  • 12
  • 55
  • 82
  • Furthermore, the reason nothing happens the second time you click the function as-is is because it is already faded in. There's nothing more to do. If you want to "fade in" again, and I don't know why you would, you need to .hide() the anchor before .fadeIn(). – Devin Burke Jan 13 '11 at 21:49
  • How come the links dont work anymore? The links will fadeout if i click on a sub-link, but it doesn't load a new page. Any idea why? – chasethesunnn Jan 14 '11 at 16:12