În acest articol, vom descrie problema și diferitele metode jQuery care vă permit să obțineți același efect, dar fără probleme cu disponibilitatea.
Arătați-mi codul
Pentru a vă oferi o ocazie de a înțelege mai bine această situație, luați în considerare următorul cod:
Pentru a roti conținutul unui bloc, puteți scrie acest cod:
Cu toate acestea, veți obține următoarea demo:
Rotația conținutului disponibilă
Pentru a rezolva problema disponibilității, menținând în același timp același efect, trebuie să folosim o altă metodă de jQuery, și suport de clasă CSS, de exemplu, vizual-ascuns. Codul clasei de economisire este prezentat mai jos:
Adăugarea acestei clase la orice element va ascunde elementul fără a seta proprietatea de afișare la nici unul.
Acum, în loc să utilizați metodele hide () / show (). Pentru a ascunde / a afișa un element, trebuie doar să adăugăm sau să eliminăm clasa vizuală ascunsă. În plus, pentru a crea o animație decentă, vom folosi metoda fadeTo (). Acesta din urmă vă permite să setați transparența elementului necesar fără a afecta proprietatea afișajului. Așadar, vom trece valoarea 0. Când trebuie să ascundem elementul și 1. când elementul ar trebui să fie afișat. În cele din urmă, am setat proprietatea opacitate la 0 pentru toate elementele animate.
Codul rezultat este prezentat mai jos:
Cu ajutorul modificărilor simple ale codului, am creat rotație mai accesibilă a conținutului. Pentru a vedea diferența dintre cele două exemple Vă sugerez să utilizați tasta TAB pentru a naviga pagina.
Articole similare
Trimiteți-le prietenilor: