Gestionați vizibilitatea unui obiect cu jQuery
În unele lecții, am folosit deja jQuery pentru a controla vizibilitatea obiectelor de pe o pagină Web. De exemplu, în lecția "Crearea unui șablon de site folosind blocuri". Folosind jQuery, am ascuns și am arătat lista de coduri făcând clic pe mouse.
Și vreau să încep cu metode de management al vizibilității - ascunde (). show () și comutare ().
Aceste metode sunt responsabile pentru vizibilitatea elementelor și funcționează în conformitate cu următorul principiu:
Încercați să faceți clic pe butoanele de sub imagine:
În acest exemplu, am atribui identificatorii ca cheile cu care voi ascunde sau a afișa desenul, și desenul în sine.
Gestionați vizibilitatea unui obiect cu jQueryÎncercați să faceți clic pe butoanele de sub imagine:
Codul jQuery pe myscripts.js pagina I a păstra doar evidența clicul evenimentului pe butoane, și în funcție de care buton se face prin clic, ascunde ascunde () sau show-show-() selectat prin ID-ul $ ( „# hideImg“) obiect - poza mea .
De fapt, puteți ascunde elementul nu numai prin utilizarea metodei hide (). dar, de asemenea, folosind foaia de stil CSS. Deci, dacă dorim ca desenul nostru să fie ascuns când încărcați pagina, atunci puteți realiza acest lucru în următoarele moduri:
Rezultatul ar fi același.
Apropo, jQuery oferă utilizatorilor o gamă largă de opțiuni pentru gestionarea stilurilor CSS. dar acesta este un subiect pentru o lecție separată: "Gestionați stilurile CSS cu jQuery".
jQuery vă permite să utilizați aceleași metode, mult mai clare, cu animație:
- - ascunde (viteză, apel invers) - ascunde,
- - (viteză, apel invers) - arată,
- - comutați (viteză, apel invers) - comutați (afișați dacă sunt ascunse și invers).
În cazul în care viteza este rata de schimbare a înălțimii, lățimii sau opacității elementului. Viteza poate avea trei valori: lent, normal sau rapid și o valoare în milisecunde. Redirecționarea apelurilor este o funcție care va fi executată după terminarea animației. Prezența ei nu este necesară.
Uită-te la exemplul cu aceeași figură, doar pentru a ascunde și a afișa imaginea voi folosi metoda de comutare ().
Faceți clic pe butonul de dedesubt din imagine:
Încercați să faceți clic pe butonul de dedesubt din imagine:
Metoda de comutare. după cum probabil ați observat, funcționează ca un comutator normal. efectuând secvențial o anumită secvență de acțiuni. În acest exemplu, primul clic pe buton se ascunde, iar cel de-al doilea afișează imaginea. Explicațiile din codul jQuery nu ar trebui să vă ducă la întrebări speciale.
O modalitate de a controla vizibilitatea obiectelor în jQuery sunt metodele de pliere - slideDown (). slideUp () și slideToggle () Aceste metode sunt, de asemenea, responsabile pentru vizibilitatea obiectelor. dar ele funcționează prin principiul de rotire a elementului de jos în sus. Extindeți articolul de sus în jos:
Și acest lucru ne va arăta Tux penguinok - un simbol al software-ului distribuit în mod liber.
Încercați să faceți clic pe butoanele de sub imagine:
Încercați să faceți clic pe butoanele de sub imagine:
Aceste metode, precum și metodele hide () și show () pot fi folosite cu animația:
- - slideUp (viteză, apel invers) - colaps,
- - slideDown (viteză, apel invers) - extindeți,
- - slideToggle (viteză, apel invers) - comutator (extindeți dacă este ascuns și invers).
În cazul în care viteza este rata de schimbare în înălțimea elementului. Viteza poate avea trei valori: lent, normal sau rapid și o valoare în milisecunde. Redirecționarea apelurilor este o funcție care va fi executată după terminarea animației. Prezența ei nu este necesară.
Iată același exemplu, ascundeți și arătați imaginea în 3 secunde folosind metoda de comutare ().
Faceți clic pe butonul de dedesubt din imagine:
- - fadeTo (viteză, opacitate, apel invers) - reduce proprietatea de opacitate la valoarea specificată,
- - fadeOut (viteză, apel invers) - reduce proprietatea de opacitate (transparență)
- - fadeIn (viteză, apel invers) - mărește proprietatea de opacitate (transparență).
În cazul în care viteza este schimbarea transparenței elementului. Viteza poate avea trei valori: lent, normal sau rapid și o valoare în milisecunde. Opacitate - valoarea transparenței la care va fi redusă (număr de la 0 la 1). Redirecționarea apelurilor este o funcție care va fi executată după terminarea animației. Prezența ei nu este necesară.
Metodele fadeOut (), fadeIn () și fadeTo ():
Metodele fadeOut (), fadeIn () și fadeTo ():
Și, în sfârșit, vreau să vă arăt metode de vizibilitate de management în obiectul jQuery cu animație - animate () și oprire (). Și ajută-mă în cutiile colorate în care am demonstrat proprietatile-z Inex lecție „investiga proprietatea indexului z folosind jQuery“ și „controla poziția stratului folosind z-index“.
Mod de preparare:
- animați (paramuri, opțiuni) - animă proprietățile stilului.
Unde paramurile sunt atributele css. pe care dorim să animăm ("lățime", "vârf", "frontieră").
Opțiuni - proprietățile animației (inclusiv viteza).
Mod de preparare:
- stop () - oprește animația.
- - Proprietățile trebuie să fie indicate fără spații, următorul cuvânt cu o literă mare, adică "borderWidth" în loc de "border-width",
- - Se acceptă numai acele proprietăți ale căror valori sunt exprimate prin numere.
- - De asemenea, valorile "ascunde" pot fi folosite ca valori de proprietate. "arată" și "comută" ".
A apărut o astfel de lecție lungă. Experimentați cu metodele pe care jQuery le oferă pentru controlul vizibilității obiectelor. Dacă aveți întrebări, vă rugăm să întrebați.
Și cum poate un buton, de exemplu, "mai departe", să îndepărteze cu ușurință o imagine și în locul ei să arate alta. Ca o galerie foto simplă?
Articole
HTML și CSS
PHP și MYSQL
SEO
Căutați pe site-ul jQuery + AJAX + PHP + MySQL
Căutați pe site AJAX + PHP + MySQL (AJAX)
Cum se creează și se instalează un favicon animat
Căutați pe site AJAX + PHP + MySQL (PHP + MySQL)
Trimiteți-le prietenilor: