Stoppen Sie die Animation nach dem Klicken auf die Schaltfläche

Question

Ich habe zwei Schaltflächen, die das Bild oben steuern, und sie ändern grundsätzlich das Bild in Vorwärtsrichtung oder umgekehrte Richtung. Mein Code ist wie folgt:

slider.fadeOut(400, function() { 
    $(this).attr('src', images[index]); 
    }).fadeIn(400); 
    console.log(index); 
}); 

Das Problem, das ist, wenn ich mehrere Mausklicks haben, das Bild ändert, aber meine verblassen Animation geschieht wie viele Male nach, nicht nur einmal, um das Bild zu ändern.

Gibt es eine Möglichkeit, die aktuelle Animation zu stoppen und das nächste Bild einzufärben? Ich möchte einfach nicht multiplizieren Knopfklicks und dann 5 Einblendungen nachher mögen.

Answer 1

Sie können die Methode stop() verwenden, um dies zu erreichen. Wenn Sie true als ersten Parameter angeben, wird auch die Warteschlange der folgenden Animationen gelöscht. Dies ist nützlich, wenn jemand das Elternereignis wiederholt ausgelöst hat. Versuchen Sie folgendes:

slider.stop(true).fadeOut(400, function() { 
    $(this).attr('src', images[index]); 
}).fadeIn(400); 

http://api.jquery.com/stop