Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web development, networking and server security. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.
← previous index next →
Source: http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

Iute Vîrf: Împiedicaţi coadă Buildup Animation

Probabil aţi dat peste o navigare alimentat de unele efecte jQuery timpul aventurilor ul dumneavoastră. Desigur, fugit apoi mouse-ul inainte si inapoi peste navigare foarte repede sa ma uit la animaţie se repeta peste şi peste şi peste din nou.

Aşteptare naturale de animaţii / efectelor de jQuery face super-animaţie tipic uşor de cod şi de a trece la sarcini mai importante. Cu toate acestea, uneori coada de animaţie doar sta in cale.

Aici este un exemplu de navigare care are unele efecte aplicate acestuia, prin intermediul jQuery. Mouse-ul inainte si inapoi peste link-urile pentru a vedea modul în care animaţiile construi.

Aici este JavaScript care face efectul de meniu:

PLAIN TEXT
JavaScript:
  1. document ). ready ( function ( ) { $ (Document). gata (function () {
  2. 'ul.anim_queue_example1 a' ) $ ("Ul.anim_queue_example1 un")
  3. ( function ( ) {. hover (function () {
  4. this ). animate ( { left : 20 } , 'fast' ) ;. $ (Aceasta) a anima ({stânga: 20}, "rapid");
  5. , function ( ) { }, Function () {
  6. this ). animate ( { left : 0 } , 'fast' ) ;. $ (Aceasta) a anima ({stânga: 0}, "rapid");
  7. ; });
  8. ; });

Acum să ne uităm la modul în care putem preveni acest comportament nedorit. Gata? Pur şi simplu apel .stop() Metoda înainte de animare din nou. Aici este JavaScript actualizate pe care fixează acumularea coada animaţie prin utilizarea .stop() metodă.

PLAIN TEXT
JavaScript:
  1. document ). ready ( function ( ) { $ (Document). gata (function () {
  2. 'ul.anim_queue_example2 a' ) $ ("Ul.anim_queue_example2 un")
  3. ( function ( ) {. hover (function () {
  4. this ). stop ( ). animate ( { left : 20 } , 'fast' ) ;. $ (Aceasta), oprire (). anima ({stânga: 20}, "rapid");
  5. , function ( ) { }, Function () {
  6. this ). stop ( ). animate ( { left : 0 } , 'fast' ) ;. $ (Aceasta), oprire (). anima ({stânga: 0}, "rapid");
  7. ; });
  8. ; });

Aici este de navigare din nou, folosind cele de mai sus JavaScript.

După cum puteţi vedea, animaţia nu mai este în aşteptare până prin mutarea mouse-ul înainte şi înapoi peste elementele de meniu.

Puteţi obţine chiar şi puncte bonus pentru punerea în aplicare ceva de genul plugin hoverIntent care poate adăuga o uşoară întârziere înainte de a rula animaţie. Procedând astfel, se asigura animaţia se joaca numai în cazul în care ghidul de locuri de fapt mouse-ul pe elementul.

Pentru mai multe informaţii despre .stop() Metoda, vizitaţi documentaţia jQuery pagina. Pentru a vedea un exemplu din lumea reala de .stop() metodă în acţiune, utilizând cele două argumente - clearQueue şi goToEnd - a verifica afară de script-ul Karl Swedberg puse împreună la Orange Micul stele.

Update: Acest articol a fost tradus în Belarus.

Published (Last edited): 11-10-2011 , source: http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup
← previous index next →