Accentsconagua

jQuery Succinctly efecte jQuery

Cod
Share

Dezactivați toate metodele jQuery Effect

Este posibil să dezactivați toate metodele de animație oferite de jQuery prin simpla setare a valorii de pe proprietate la Adevărat.

    
Încearcă să mă animi!

Cand de pe este setat sa Adevărat, toate metodele de efect nu vor anima și vor fi ascunse și afișate imediat folosind regulile CSS display: none și display: block. Puteți activa din nou animația trecând de pe proprietate a fals valoare.

    
 Încearcă să mă animi!

Grokking metoda stop () Animație

Este adesea necesar să opriți o animație în curs de desfășurare înainte de a începe o altă animație. De exemplu, atunci când utilizați personalizat mouseenter și mouseleave evenimente (sau planare() metoda), puteți declanșa în mod involuntar un element care este deja animat datorită unui precedent mouseenter sau mouseleave eveniment. Acest lucru cauzează acumularea de animații în coadă, ceea ce are ca rezultat o interfață lentă. Pentru a evita acest lucru, pur și simplu utilizați Stop() pentru a opri animația curentă înainte de a începe o nouă acțiune.

    
 Hover peste mine!

Scoateți Stop() metodele din cod și rotiți mouse-ul peste element de mai multe ori pentru a vedea animațiile fantomă apar. Rolind continuu elementul din pagină va duce la acumularea de animație, care de obicei nu este rezultatul dorit.

Note: În plus, este posibil să nu se oprească numai animația curentă din coada de așteptare pentru elementul select, ci și întreaga coadă, trecând Stop() metoda un parametru de adevărat. Acest lucru va opri în mod eficient toate animațiile de așteptare, active și inactive.

Determinarea dacă un element folosește animație: animat

Obiceiul :animat filtrul selector poate fi utilizat pentru selectarea elementelor care animă în prezent. Mai jos, folosesc acest filtru de selecție personalizat pentru a adăuga text la o animație

element.

Folosind show (), ascunde () și comuta (), fără animație

Utilizarea spectacol(), ascunde(), și comutare() metodele cu un parametru vor determina afișarea sau ascunderea elementelor prin schimbarea proprietăților CSS: înălțime, lățime, opacitate, margine, umplutură. Este posibil să ignorați animațiile pentru a ascunde și a arăta elementele pur și simplu fără a trece parametrii. Acest lucru modifică modul în care aceste metode ajustează vizibilitatea unui element. Elementele afectate vor apărea pur și simplu sau vor dispărea fără animație prin ajustarea CSS afişa proprietate în loc.

       
Faceți clic pe Me (ascundeți animația)
 
Faceți clic pe Me (ascundeți nici o animație)

Note: Metodele jQuery ascunde(), spectacol(), comutare(), glisați în sus(), glisați în jos(), slideToggle (), atunci când este utilizat pe elemente care au un CSS afişa valoarea in linie, va fi schimbat display: block pentru durata animației.

Grokking secvențiale și non-secvențiale animații

Este important să înțelegeți diferența dintre animațiile care se întâmplă simultan și animațiile care apar într-o ordine succesivă în timp. În mod implicit, atunci când metodele de efect sunt înlănțuite, ele sunt adăugate la o coadă și fiecare efect are loc unul după altul.

    
 Animați-mă! 
 
 Animați-mă!

Utilizarea anima() , puteți seta animațiile să apară neadecvat sau în același timp prin trecerea tuturor modificărilor proprietății CSS la un singur anima() apel de metodă. În codul de mai jos,

va anima în același timp lățimea și lățimea stângă a marginii.

    
Animați-mă!

Animate () este baza, abstractizarea la nivel scăzut

anima() metoda este metoda de bază care este utilizată pentru a construi toate animațiile preconfigurate - de ex. ascunde(), glisați în jos(). Oferă posibilitatea de a schimba (în timp) valorile proprietăților stilului.

Iată ce trebuie să știți atunci când utilizați această metodă.

  • Se acceptă numai proprietățile care iau valori numerice. Cu alte cuvinte, nu puteți anima valoarea, de exemplu, a culoare de fundal proprietate (cel puțin nu fără un plugin). De asemenea, proprietăți care iau mai mult decât o valoare ca backgroundPosition nu pot fi animate.
  • Puteți anima proprietățile CSS utilizând em și%, dacă este cazul.
  • Animațiile relative pot fi specificate utilizând "+ =" sau "- =" în fața valorii proprietății. Aceasta ar mută, de exemplu, un element pozitiv sau negativ față de poziția sa actuală.
  • Dacă specificați o durată de animație de 0, animația va seta imediat elementele la starea finală.
  • Ca o comandă rapidă, dacă o valoare de comutare este trecut, o animație se va schimba pur și simplu de unde este și va anima în acest scop.
  • Toate proprietățile CSS sunt setate printr-un singur anima() metoda se va anima in acelasi timp.

Grokking metodele jQuery Fading

Trei concepte trebuie să fie chemați când se utilizează fadeIn (), fadeOut (), și fadeTo () metode.

  • Spre deosebire de alte metode de efect, metodele de decolorare ajustează doar opacitatea unui element. Se presupune că, atunci când se utilizează aceste metode de efect, orice element care este decolorat are deja o înălțime și o lățime.
  • Animațiile de estompare vor decolora elementele din opacitatea lor actuală.
  • Utilizarea fadeOut () metoda va decolora un element din opacitatea sa actuală și după ce 100% va dispărea, va schimba proprietatea de afișare CSS a elementului "nici unul".

Fiecare dintre punctele menționate mai sus este ilustrată în codul de mai jos.
Cod
×