JQuery-Ereignisse Hover, MouseEnter und MouseLeave lösen die Animation nur einmal aus

jquery Hover MouseEnter Mouseleave-Ereignis wird nur einmal ausgelöst Animation

jquery.mouseenter(function(){
    $(div).animate({'margin-top':'100px'},1000)
})
jquery.mouseleave(function(){
    $(div).animate({'margin-top':'200px'},1000)
})

Bewegen Sie die Maus zu einem bestimmten Div, lösen Sie das MouseEnter-Ereignis und die Animation aus und bewegen Sie sich aus, um Mouseleave-Ereignisse und Animationen auszulösen, aber wenn das Div hin und her bewegt wird, wird das Ereignis mehrmals ausgelöst und die Animation wird mehrmals wiederholt. Wie können die Mouseenter- und Mouseleave-Ereignisse während des Animationsausführungsprozesses nicht ausgelöst werden? ist, dass die Maus während des Animationsprozesses über dieses Div fährt. Sie wird erst ausgelöst, nachdem die Animation beendet und erneut überquert wurde.

Sie können die Stoppmethode verwenden:

$(div).stop(false, true).animate({'margin-top':'100px'},1000);

Wenn der erste Parameter von stop() wahr ist, bedeutet dies, dass die aktuelle Animation sofort gelöscht wird Warteschlange , der Standardwert ist fx; wenn der zweite Parameter wahr ist bedeutet, dass die aktuell ausgeführte Animation sofort in ihren Endzustand versetzt wird.

Beurteilen Sie, bevor Sie die Animation ausführen:

if (!$(obj).is(':animated')) {    // to do something
}

Wenn sich das ausgewählte Element nicht im Animationsstatus befindet, wird die Animation ausgeführt. Andernfalls ignorieren Sie

^_^ (den Ausdruck, auf eine Frage zu stoßen, die zuvor eindeutig beantwortet wurde)

Dies wird von @Humphry als „Animationsatomizitätsproblem“ bezeichnet. Das heißt, wenn es sich bei der Animationsaktion um einen nicht wiedereintrittsfähigen atomaren Prozess handelt, wie wird diese Funktion dann im Code implementiert?

Eine ganz klare Antwort finden Sie hier. Die Antwort ist die offensichtliche Markierungsmethode: Richten Sie das zu animierende Element aus, setzen Sie die Markierung, wenn die Animation beginnt, und entfernen Sie sie, wenn sie endet (mithilfe der -Rückruffunktion ). Wenn eine Markierung vorhanden ist, darf das Ereignis, das die Animation startet, nicht ausgelöst werden.

Das obige ist der detaillierte Inhalt vonJQuery-Ereignisse Hover, MouseEnter und MouseLeave lösen die Animation nur einmal aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!