Blocklink beim Animieren wechseln

Question

Ich habe ein kleines Problem mit meinem Code und kann keine Lösung finden. In meiner Seite gibt es eine obere Leiste mit Links (Home, About, Sign-up), jeder Link besitzt seinen eigenen Inhalt. Angenommen, der Nutzer sieht sich gerade den Inhalt "Home" an und klickt dann auf "About". Die Seite soll den Inhalt "Home" ausblenden und dann den Inhalt "About" anzeigen.

Ich habe jedoch festgestellt, dass es einen Fehler gibt, wenn Sie auf einen anderen Link klicken, während ein Inhalt animiert wird. Daher habe ich eine Variable namens AllowLinkSwitch erstellt, um den Benutzer daran zu hindern, zu einem anderen Link zu wechseln, wenn noch eine Animation läuft.

this.ContentHideThenShow = function(contentHide, contentShow, contentShowHeight) 
{ 
    this.AllowLinkSwitch = false; 
    $(contentHide).animate({ 
     height: "0px" 
    }, 300, function(){ 
     $(contentHide).hide(); 
     $(contentShow).show(); 
     $(contentShow).animate({ 
      height: contentShowHeight 
     }, 300, function(){ this.AllowLinkSwitch = true; }); 
    }); 
} 

Zuerst stelle ich AllowLinkSwitch-false, wenn die Funktion aufgerufen wird, und legen Sie es dann zu true wenn die Animation endet, aber die Variable wird nie wieder auf true gesetzt, und ich kann auf andere Verbindungen nicht wechseln, die oben Code funktioniert nur, wenn ich die this.AllowLinkSwitch = true; Zeile außerhalb der Animate-Funktion setzen, aber ich will nicht, dass es so funktioniert, weil der Fehler immer noch auftritt, muss ich diese Variable auf true setzen, sobald die Animation endet, kann jemand helfen?

Answer 1

Innerhalb des animate() Callbacks ist this nicht die gleiche Referenz auf das äußere Objekt. Sie müssen die Referenz außerhalb dieser Funktion speichern. Versuchen Sie folgendes:

this.ContentHideThenShow = function(contentHide, contentShow, contentShowHeight) { 
    var _this = this; // store reference here 
    _this.AllowLinkSwitch = false; 
    $(contentHide).animate({ 
     height: "0px" 
    }, 300, function() { 
     $(contentHide).hide(); 
     $(contentShow).show().animate({ 
      height: contentShowHeight 
     }, 300, function(){ 
      _this.AllowLinkSwitch = true; // use here 
     }); 
    }); 
} 

Alternativ können Sie die Verwendung des Animationsstaatsflagge vollständig durch die Verwendung if (!$(contentShow).is(':animated')) zu überprüfen, ob das Element zur Zeit vermeiden könnte, ist belebend und verhindern Logik, von wo in Ihrem Code erforderlich auftritt.

Answer 2

Ihre this.AllowLinkSwitch Variable ist auf true eingestellt, aber nur im Funktionsumfang sollten Sie globale Variable verwenden.