Heim > Web-Frontend > js-Tutorial > JQuery-Ereignisse Hover, MouseEnter und MouseLeave lösen die Animation nur einmal aus

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

黄舟
Freigeben: 2017-06-28 10:05:18
Original
2719 Leute haben es durchsucht

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)
})
Nach dem Login kopieren

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);
Nach dem Login kopieren

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
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage