Quick Tipp: Verhindern Sie Zeichentrickfilm-Warteschlange-Akkumulation

Quick Tipp: Verhindern Sie Zeichentrickfilm-Warteschlange-Akkumulation
© Copyright 2006–2012 Learning jQuery and participating authors.
For original English text, go to: http://www.learningjquery.com
Translated by A.Romanova

Sie sind wahrscheinlich nach einer Navigation gestolpert, die durch einige jQuery Effekten während Ihrer Webabenteuer angetrieben ist. Natürlich führten Sie dann Ihre Maus hin und her über die Navigation wirklich schnell, um zu sehen, dass der Zeichentrickfilm sich immer wieder und wieder wiederholte.

Das natürliche Schlangestehen von Zeichentrickfilmen/Effekten durch jQuery macht den typischen Zeichentrickfilm super leicht, zu codieren und zu wichtigeren Aufgaben weiterzugehen. Jedoch manchmal ist die Zeichentrickfilm-Warteschlange gerade im Weg.

Hier ist ein Beispiel einer Navigation, die einige Effekten hat, die darauf über jQuery angewandt sind. Maus hin und her über die Links, um zu sehen, wie sich die Zeichentrickfilme entwickeln.

Hier gibt es JavaScript, das der Effekt für Menü tut:

JavaScript:

  1. $(document).ready(function() {
  2.     $(‘ul.anim_queue_example1 a’)
  3.         .hover(function() {
  4.             $(this).animate({ left: 20 }, ‘fast’);
  5.         }, function() {
  6.             $(this).animate({ left: 0 }, ‘fast’);
  7.         });
  8. });

Jetzt werfen wir einen Blick darauf, wie wir dieses unerwünschte Verhalten verhindern können. Bereit? Nennen Sie einfach die .stop () Methode vor dem Beleben wieder. Hier ist der aktualisierte JavaScript, der die Zeichentrickfilm-Warteschlange-Zunahme befestigt, die .stop () Methode verwendend.

JavaScript:

  1. $(document).ready(function() {
  2.     $(‘ul.anim_queue_example2 a’)
  3.         .hover(function() {
  4.             $(this).stop().animate({ left: 20 }, ‘fast’);
  5.         }, function() {
  6.             $(this).stop().animate({ left: 0 }, ‘fast’);
  7.         });
  8. });

Hier gibt es wieder die Navigation, das oben JavaScript verwendend.

Wie Sie sehen können, wird der Zeichentrickfilm nicht mehr Schlange gestanden, bis durch Ihre Maus hin und her über die Menüpunkten bewegend.

Sie können sogar Bonus-Punkte bekommen für die Umsetzung von etwas, wie der hoverIntent Steck, der eine geringe Verzögerung vor dem Laufen des Zeichentrickfilms hinzufügen kann. So machend, stellt sicher, dass der Zeichentrickfilm nur spielt, wenn der Benutzer wirklich die Maus auf dem Element legt.

Für mehr Information über die .stop () Methode, besuchen Sie die jQuery Dokumentationsseite. Um ein wirkliches Beispiel der .stop () Methode in der Handlung zu sehen, seine zwei Argumente – clearQueue und goToEnd verwendend – überprüfen Sie die Schrift Karl Swedberg,  zusammengestellt an Little Orangen Star.

Schriften werden in diesen Posten eingeschlossen: