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');
    });
  });

Was mache ich falsch?

Jeder Code, den ich innerhalb der zweiten FadeOut-Callback-Funktion hinzufüge, wird nie ausgeführt...

Answer 1

Setzen Sie var ul = $('ul'); auch in Ihrer zweiten Funktion.

Answer 2

ul ist im zweiten Callback nicht definiert. Ändern Sie den Geltungsbereich so, dass er für beide Rückrufe sichtbar ist.

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');
  });
});

Wenn Sie nicht wollen ul außerhalb des Geltungsbereichs liegen soll, verpacken Sie sie entweder in eine selbst aufrufende Funktion oder geben Sie die ul innerhalb jedes Rückrufs von toggle() .

Answer 3

Die Variable ul existiert nicht im Bereich der zweiten Funktion. In Ihrem Fall ist das eine unnötige Optimierung, denn das Folgende sollte auch funktionieren:

  $('.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');
    });
  });