So blockieren Sie JQuery-Aktionen, während eine vorherige Aktion noch ausgeführt wird

Question

Ich habe ein div auf einer Seite, die bei Hover nach oben und dann bei Hover-out wieder nach unten zeigt. Wenn Sie dann auf das Element ein- und ausschweben würden, werden alle Aktionen in die Warteschlange gestellt und somit ausgelöst, wodurch das Objekt weiter nach oben und unten verschoben wird, obwohl Sie nicht mehr mit ihm interagieren.

Sie können dies in Aktion auf der Seite zu sehen, ich entwickle here. Bewegen Sie einfach den Mauszeiger über das große Bild in der Mitte, um das Informations-Div zu sehen.

Idealerweise sollte während einer Animation keine weiteren Aktionen in die Warteschlange gestellt werden.

Hier ist mein aktueller Code:

$(document).ready(function(){ 
    $(".view-front-page-hero").hover(
     function() { 
      $hero_hover = true; 
      $('.view-front-page-hero .views-field-title').slideDown('slow', function() { 
       // Animation complete. 
      }); 
     }, 
     function() { 
      $hero_hover = false; 
      $('.view-front-page-hero .views-field-title').slideUp('slow', function() { 
       // Animation complete. 
      }); 
     } 
    ); 
}); 

Vielen Dank im Voraus!

Answer 1

Erstellen Sie eine globale Variable. Wenn die Animation startet. Löschen Sie es, wenn es abgeschlossen ist. Setzen Sie eine Bedingung, um die Funktion zu beenden, wenn diese Variable vor dem Aufruf der Animation gesetzt ist.

Answer 2

Dies ist wahrscheinlich nicht die beste Lösung, aber wenn Sie stop(true, true) vor der Animation ausführen, sollte es funktionieren.

Live-Demo:http://jsfiddle.net/TetVm/

Answer 3

$(document).ready(function(){ 
var continue=true; 
    $(".view-front-page-hero").hover(
     function() { 
     if(continue){ 
      $('.view-front-page-hero .views-field-title').slideDown('slow', function() { 
       continue=false; 
      }); 
      } 
     }, 
     function() { 
     if(continue!){ 
      $('.view-front-page-hero .views-field-title').slideUp('slow', function() { 
       continue=true; 
      });  
      } 
     } 
    ); 
}); 

// dies wird Ihr Code korrekt funktionieren machen ...