Wie man JQuery-Aktionen blockiert, während eine vorherige Aktion noch läuft

Question

Ich habe ein Div in einer Seite, die nach oben auf Hover gleitet, und dann wieder nach unten auf Hover aus. Wenn Sie dann zu schweben in und aus auf das Element, dann werden alle Aktionen in die Warteschlange gestellt werden und somit ausgelöst, wodurch das Objekt zu halten gleiten nach oben und unten, obwohl Sie nicht mehr mit ihm interagieren.

Sie können dies auf der Website, die ich entwickle, in Aktion sehen aquí . Bewegen Sie einfach den Mauszeiger über das große Bild in der Mitte, um die Informationen zu sehen, die angezeigt werden.

Im Idealfall sollten 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.
            });
       }
    );
});

Answer 1

Erstellen Sie eine globale Variable. Wenn die Animation beginnt. Lösche sie, wenn sie beendet ist. Legen Sie eine Bedingung fest, um die Funktion zu beenden, wenn diese Variable vor dem Aufruf der Animation gesetzt wird.

Answer 2

Dies ist wahrscheinlich nicht die beste Lösung, aber wenn Sie die stop(true, true) vor der Animation, 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;
             });      
          }
       }
    );
});

//dadurch wird Ihr Code korrekt funktionieren...