Wie verlangsamen und stoppen Sie aktuelle jQuery-Animationen? - jquery, jquery-animate

jQuery-Frage. Ich habe den .block animiert, der sich für 5000px nach rechts bewegt.

$(".block").animate({"left": "+=5000px"}, 2000, "linear");

Was ich brauche ist, diese Animation nach dem Klick langsam anzuhalten:

("#clickme").click(function() {
// ... stop $(".block") animation, not immediately, but with some easing
});

Ist das mit jQuery möglich? Vorschläge werden geschätzt.

Antworten:

Mit der Funktion .stop () können Sie eine Animation sofort stoppen:

http://api.jquery.com/stop/

Es macht jedoch einen harten Halt. Wenn Sie animieren, ist dies ein ziemlich abrupter Stopp.

Ich würde dies beheben, indem ich die Animation stoppe, wenn der Benutzer auf den Stopp-Auslöser klickt, und dann eine neue Animation starte, die die Illusion eines erleichterten Stopps vermittelt. Hier ein Beispiel: http://jsfiddle.net/brianflanagan/BsQvh/ Der Trick besteht darin, die Einstellungen der zweiten Animation zu optimieren, damit alles reibungslos funktioniert. Sie werden die Dauer und die Distanz heiraten wollen, damit sie mit dem Tempo der Originalanimation verschmelzen.

Ich weiß, das ist alt, aber hier ist, wie ich das machen würde:

var stopping = false;
var lastNow = 0;
$(".block").animate({left:"+=5000px"}, {
step: function(now){
if (stopping) {
var delta = lastNow - now;
$(this).stop().animate({ left : "+=" delta * 2 }, 1000, "easeInOutQuad");
stopping = false;
}
lastNow = now;
}});

Zum Stoppen setzen stopping zu true