Animația pe paginile web moderne a fost mult timp considerată de la sine înțeles. Elementele dizolvate, mesajele zburătoare, galeriile de imagini glisante îmbunătățesc experiența utilizatorului și măresc performanța site-ului. În populara bibliotecă jQuery javascript, fadeIn() este una dintre funcțiile de bază ale animației. Controlează transparența blocurilor.
efecte de estompare
Metoda fadeIn() asigură că transparența elementului transmis acestuia se schimbă la 100%. În biblioteca jQuery, este asociat cu funcția fadeOut(), care poate fi folosită pentru a reduce transparența și, prin urmare, a „dizolva” elementul.
Te va interesa:
Un efect similar poate fi obținut cu metoda fadeTo(), care are o gamă și mai largă de influență. FadeTo() poate seta orice valoare a transparenței între 0 și 1.
Sintaxa metodei
Metoda fadeIn() a jQuery este apelată în contextul elementului a cărui transparență trebuie modificată. Poate lua de la zero la trei parametri:
element.fadeIn(); element.fadeIn(durata); element.fadeIn(durata, callback); element.fadeIn(durată, relaxare, callback); element.fadeIn(config);
Argumentul durată specifică perioada de timp pe care o va dura animația. Acesta poate fi un număr care reprezintă numărul de milisecunde sau unul dintre următoarele cuvinte cheie:
- „rapid” (200 ms);
- „lent” (600 ms);
Dacă durata nu este setată, aceasta va fi implicită la 400 de milisecunde.
Parametrul callback specifică o funcție care va fi apelată imediat după finalizarea animației. Funcția de apel invers nu acceptă niciun parametru. Această variabilă din interiorul ei se referă la nodul DOM care este modificat.
Argumentul de relaxare controlează funcția de sincronizare a animației, adică viteza acesteia în timp. Cu el, puteți accelera începutul și încetini sfârșitul animației sau o puteți uniformiza pe tot parcursul. Valoarea argumentului este un șir care conține cuvântul cheie, implicit este funcția „swing”.
În exemplul următor, jQuery fadeIn() va crește uniform transparența unui element cu clasa .block timp de o secundă, după care va imprima un mesaj pe consolă:
$(".block").fadeIn(1000, linear, function() ( console.log("Animation complete"); ));
Dacă parametrii enumerați nu sunt suficienți, puteți trece obiectul de configurare metodei, care poate conține până la 11 setări diferite.
Reapeluri
Parametrul de apel invers transmis metodei jQuery fadeIn() este o opțiune foarte utilă deoarece modificarea proprietății este asincronă fără a bloca fluxul general de cod.
const callback = function() ( console.log("Animation completed"); ); $(".element").fadeIn(1000); suna inapoi();
În acest exemplu, funcția va rula imediat după începerea animației, fără a aștepta ca elementul să apară complet.
Pentru ca totul să funcționeze conform intenției, ar trebui să utilizați argumentul callback pentru a prinde sfârșitul animației:
const callback = function() ( console.log("Animation completed"); ); $(".element").fadeIn(1000, callback);
Acum mesajul către consolă va fi afișat numai atunci când elementul devine complet vizibil.
Transparență deplină și ascunderea elementului
După cum știți, valoarea zero a proprietății de opacitate nu elimină elementul din pagină, ci doar îl face invizibil. Acest comportament nu este potrivit dacă vrem să ascundem un anumit bloc.
Acesta este motivul pentru care metodele de fade ale jQuery fadeIn(), fadeTo() și fadeOut() funcționează cu transparență în combinație cu proprietatea de afișare. Un element complet transparent este ascuns folosind afișajul: nicio regulă și înainte de a apărea, această regulă este anulată.
Modifică nivelul de transparență al elementelor selectate de pe pagină. Vă permite să schimbați transparența fără probleme. Metoda are două utilizări:
durată— durata modificării transparenței. Poate fi dat în milisecunde sau valoarea șirului „rapid” sau „lent” (200 și 600 milisecunde).
opacitate— valoarea transparenței cerute. Trebuie specificat ca un număr de la 0 la 1 (0 - transparență totală, 1 - fără transparență).
suna inapoi este funcția specificată ca handler de finalizare a modificării transparenței. Nu i se trec niciun parametri, însă, în interiorul funcției, această variabilă va conține obiectul DOM al elementului a cărui transparență este modificată. Dacă există mai multe astfel de elemente, atunci handlerul va fi apelat separat pentru fiecare element.
durată- vezi descrierea de mai sus. Implicit, parametrul este 400
opacitate- Vezi deasupra.
relaxarea- dinamica schimbării transparenței (fie că va încetini până la sfârșitul cursei sau, dimpotrivă, se va accelera). (Vezi descrierea)
suna inapoi- Vezi deasupra.
- schimba transparența
- setați transparența unui element
- setați nivelul de transparență al unui element
- element de transparență
- .fadeTo()
- fadeTo()
În acest tutorial, ne vom uita la un exemplu Se modifică transparența jQuery. Subiecte similare au fost deja discutate în lecție, ei bine, acolo principiul scenariului se baza pe un simplu cssși html, în această lecție vom atinge și jQuery plus totul, a existat o simplă schimbare a imaginii la hover, transparența se realizează imediat ( opacitate).
Cred că ați vizionat deja două demonstrații și ați înțeles diferența în modul în care funcționează scripturile. Să aruncăm o privire acum la codul acestui tutorial.
Primul pas. HTML.
Și așa avem un dosar index.php.
În el, includem mai întâi biblioteca jquery.js. Descărcați-l pentru dvs. și conectați-vă între etichete cap.
În continuare, vom analiza jQuery cod care va interacționa cu clasa img. Mai întâi, scriem o funcție care are o clasă imgși setați transparența 50% in pozitia initiala. Adică o imagine fără să treacă peste ea are jumătate din transparență. Apoi, când se efectuează o acțiune de hover pe imagine, se numește o funcție care comută poziția clasei img la poziția clară. După ce indicarea spre imagine este finalizată, funcția comută la poziția inițială inițială. Atribut de transparență a imaginii opacitate. O puteți studia în detaliu în documentația pt css.
$(function() ( // setează opacitatea imaginii la 50% $(".img").css("opacity","0.5"); // trece cu mouse-ul peste imaginea $(".img"). hover( function () ( // dupa care transparenta dispare $(this).stop().animate(( opacitate: 1.0 ), "lent"); ), // dupa scoaterea mouse-ului peste functia de imagine () ( // transparența revine la poziția inițială 50% $(this).stop().animate(( opacitate: 0,5 ), "lent"); )); ));
Al doilea pas. Fișier în stil CSS.
Înregistrăm eticheta divși da-i o clasă imagini vom specifica în el câteva stiluri css pentru imagine (dacă doriți, este mai bine să vedeți cum funcționează acest script). Acum scrieți eticheta imgîn ea specificăm calea către imagine și setăm clasa img, care interacționează cu jQuery codul de mai sus.
Puține stiluri css pentru o mai bună vizibilitate.
Imagini (chenar: 1px solid #363636; lățime: 300px; culoare de fundal: #2d2d2d; umplutură: 8px; )
Scriptul este simplu, ceea ce îl face mai relevant pentru aplicare schimbări de transparență hover imagini. Te sfătuiesc să te joci cu jQuery cod, unde există trei funcții: initial, hover și unhover. Puteți arăta varietate. Să presupunem că, în poziția inițială, specificați opacitate 0,5, la hover opacitate 1.0, și de la eliminarea îndrumării opacitate 0,2. Se va dovedi un fel de acțiune foarte interesantă cu imaginea!
Și din nou vă urez bun venit dragi cititori ai blogului. Astăzi vreau să vă spun cum să faceți transparență netedă a oricărui element de pe site folosind jQuery. Ce înseamnă pentru orice element? Aceasta înseamnă că puteți aplica această transparență oricăror imagini, contoare și etichete de pe site. Toate acestea vă vor decora doar resursa. Asadar, haideti sa începem.
Permiteți-mi să vă reamintesc că megaweb.su ne-a împărtășit scenariul, pentru care îi mulțumesc mult.
Scenariul
Primul lucru de făcut este să includeți biblioteca jQuery, în sensul, scriptul pe care trebuie să-l pui mai jos între etichete și .
Apoi, chiar înainte de etichetă copiați și lipiți următoarele Scriptul jQuery:
Copiat? Felicitări, cea mai mare parte a muncii pe care le-ați făcut deja :-)
Configurare script
Puteți personaliza complet acest script după gustul dvs.
- $('.megaweb') este numele clasei care va fi aplicată elementelor web;
- animate((opacitate:'0,3'),1);- aceasta este cea mai optimă transparență a elementului;
- animate((opacitate:'1.0'),600);- transparența elementului web la hover;
- animate((opacitate:'0,3'),300);- readucerea elementului la prima transparență, după ce cursorul este îndepărtat din element.
După ce am configurat scriptul după cum avem nevoie, acesta poate fi aplicat elementelor de web design folosind o clasă, de exemplu.
