Salutări pe blogul dvs.!
Astăzi vă voi spune cum să adăugați diferite efecte la o pagină HTML folosind jQuery.
Ascundeți / Afișați și comutați componenta HTML a Div / Span folosind jQuery
Până în prezent, cele mai multe pagini web au secțiuni pe care le puteți ascunde / spectacol (ascunde / spectacol), și pur și simplu a pus un spoiler (spoiler), făcând clic pe pictograma din această secțiune. În plus, s-ar putea dori în continuare să stea un spoiler pe o anumită componentă HTML ca un buton, un câmp de text sau div / span. Acest lucru poate fi ușor de realizat cu ajutorul JQuery.
Să presupunem că avem o casetă de text și un buton și trebuie să deschideți o casetă de text când faceți clic pe buton. Mai jos este un fragment de cod pentru a face acest lucru.
În fragmentul de cod de mai sus, selectăm câmpul de text folosind ID-ul său #user și apoi sunăm funcția ascunde () pentru a-l ascunde. Pur și simplu, nu-i așa?
În plus, pentru a arăta ce componentă vom folosi, trebuie să adăugăm următorul cod:
În plus, nu numai că puteți ascunde / afișa orice componentă HTML, și puteți specifica o viteză și o funcție de apel invers, care este numit după ce conținutul este ascuns sau afișat ca în codul de mai jos.
Sintaxa pentru ascundere () și show () este prezentată mai jos:
De asemenea, puteți specifica o funcție de handler care este apelată după terminarea animației.
În plus, puteți implementa funcția de comutare, în cazul în care apăsați butonul, puteți comuta pentru a provoca un efect asupra div tag-ul sau tabel.
SlideUp / SlideDown cu jQuery
Acesta este un efect simplu care arată modul în care containerul se alunecă - în jos sau în sus. Pur și simplu trebuie să apelați funcțiile slideUp () și slideDown ().
SlideUp / SlideDown similare funcții ascunde () / spectacol (), pot fi de asemenea utilizate diferite argumente pentru a regla viteza de alunecare, și poate fi cauzată și de funcția de apel invers.
De asemenea, puteți utiliza funcția SlideToggle () pentru a obține funcționalitatea slide-up sus și jos. SlideToggle () are, de asemenea, aceleași argumente ca și SlideDown / SlideUp.
Animarea componentelor HTML folosind jQuery
JQuery oferă animate (), cu care vă puteți crea propriile animații. Sintaxa acestei funcții este după cum urmează:
Un aspect cheie al acestei funcții este obiectul proprietăților de stil care vor fi animate. Fiecare cheie în cadrul obiectului este un stil de proprietate, care, de asemenea, va fi animată (de exemplu: «înălțime», «sus» sau «opacitate»).
Valoarea asociată cheii este proprietatea căreia îi aparține animația. Dacă valoarea este un număr, atunci proprietatea stilului va fi transferată de la starea curentă la acest număr nou. În caz contrar, dacă șirul «ascunde», «spectacol» sau «comutare» este furnizat, animația implicită va fi construit pentru această proprietate.
- paramuri (Hash): Un set de atribute de stil pe care doriți să le animați.
- Viteza (String | Număr): (opțional) Un șir care reprezintă una dintre cele trei viteze prestabilite ( «lent», «normală», sau «rapid») sau un număr de milisecunde pentru a rula animație (de exemplu, 1000).
- relaxare (String): (opțional) Numele efectului pe care doriți să îl utilizați (este necesar un modul de efect).
- apel invers (funcție): (opțional) O funcție care trebuie executată când animația este finalizată.
Un exemplu de utilizare a funcției de "relaxare" pentru a obține un stil de animație diferit. Acest lucru va funcționa numai dacă aveți un plug-in, care oferă această caracteristică „relaxarea“ (numai funcție „liniară“ este prevăzută în mod implicit cu Jquery).
Astfel, puteți utiliza jQuery pentru a crea o afișare bună a UI pe pagina dvs. web. De asemenea, permiteți-mi să știu dacă utilizați propriile plug-in-uri încorporate pentru a obține alte efecte ale UI.
Asta este! La revedere și văd curând!