Das zweite Klickereignis der animierten Animation in jQuery reagiert nicht auf_jquery

Bei der Verwendung von animate für die Animation zum Umblättern von Klicks habe ich festgestellt, dass die Animation des zweiten Klickereignisses nicht reagierte, der erste Klick jedoch Animationseffekte hatte. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

$(".page").stop().animate({top:“-300px“}, 800, 'easeInOutExpo');

Der Grund, warum die Animation des zweiten Klickereignisses nicht reagiert: oben ist der Abstand zwischen dem oberen Rand des Seitenelements und dem oberen Rand seines übergeordneten Elements. Nach dem ersten Klick hat sich der obere Rand des Seitenelements bewegt eine Position von -300 Pixel vom oberen Rand des übergeordneten Elements. Wenn Sie zweimal darauf klicken, verschiebt sich die Seite nicht weiter um -300 Pixel von der verschobenen Position, sondern die aktuelle Position beträgt -300 Pixel vom oberen Rand des übergeordneten Elements. Offensichtlich wurde es beim ersten Mal an die Position „top:-300px“ verschoben, und beim zweiten Mal ist der Bewegungsabstand „top:-300px“ 0, sodass keine Reaktion erfolgt.
Lösung:

Code kopieren Der Code lautet wie folgt:

$(".page").stop().animate({top:“-=300px“}, 800, 'easeInOutExpo');

oben: „-=300px“, sodass der zweite Klick weiterhin -300px an die Position nach dem ersten Klick verschiebt.

Wenn die von der Animation zurückgelegte Distanz eine Variable ist, kann sie nicht mit „-= Variablenname“ geschrieben werden:

 
function down() {
var page_h=$(".page").height(); //687
var page_top=parseInt($(".page").css("top")); //0
var move=wrap_top+page_h;
$(".page").stop().animate({top:move}, 800, 'easeInOutExpo');
};

var page_h=$(".page").height(); Ermitteln Sie die Höhe der Seite und weisen Sie sie page_h zu var page_top=parseInt($(".page").css("top")); Ermitteln Sie den Abstand vom oberen Rand der aktuellen Seite zum oberen Rand des übergeordneten Elements und weisen Sie ihn page_top zu (parseInt: entfernen Sie „PX ");
var move=wrap_top page_h; Berechne die Bewegungsdistanz;

Auf diese Weise erhält jede Animation den „Abstand vom oberen Rand der aktuellen Seite zum oberen Rand ihres übergeordneten Elements“ zurück.

Hinweis: Der Wert von $(".page").height() hat keine px-Einheit, der Wert von $(".page").css("top")) hat keine px-Einheit und erfordert parseInt Die Einheit px Pixeleinheit muss zur Berechnung gelöscht werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.