jQuery toggle() problem

Question

  $('.toggle').toggle(function(){
    var ul = $('ul');
    ul.fadeOut('fast', function(){
      ul.fadeIn('fast').removeClass('off');
      ul.addClass('on');
    });
  }, function(){
    ul.fadeOut('fast', function(){
      alert('wtf'); // <- never gets here...
      ul.fadeIn('fast').removeClass('on');
      ul.addClass('off');
    });
  });

What am I doing wrong??

Any code that I add inside the second fadeOut callback function never gets executed...

LOL. alert('wtf'). I will use that in future work-related conversations. — Jeff Meatball Yang, Apr 05 '11 at 02:49

score 3 · Accepted Answer · answered Apr 05 '11 at 02:21

3

Put var ul = $('ul'); in your second function too.

answered Apr 05 '11 at 02:21

Plynx

11,341
3
32
33

score 2 · Answer 2 · answered Apr 05 '11 at 02:21

ul is not defined in the second callback. Change its scope so it is visible to both callbacks.

var ul = $('ul');

$('.toggle').toggle(function(){
  ul.fadeOut('fast', function(){
    ul.fadeIn('fast').removeClass('off');
    ul.addClass('on');
  });
}, function(){
  ul.fadeOut('fast', function(){
    ul.fadeIn('fast').removeClass('on');
    ul.addClass('off');
  });
});

If you don't want ul to be in scope outside of this, either wrap it in a self invoking function or specify the ul within each callback of toggle().

score 2 · Answer 3 · answered Apr 05 '11 at 02:23

The variable ul doesn't exist in the scope of the second function. It's actually a bit of an unneeded optimization in your case, since the following should also work:

  $('.toggle').toggle(function(){
    $('ul').fadeOut('fast', function(){
      $(this).fadeIn('fast').removeClass('off').addClass('on');
    });
  }, function(){
    $('ul').fadeOut('fast', function(){
      $(this).fadeIn('fast').removeClass('on').addClass('off');
    });
  });

jQuery toggle() problem

3 Answers3