Jquery schimbare lină a transparenței. Schimbarea transparenței JQuery. Adăugat în versiunea jQuery

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(), cu care puteți reseta transparența și, prin urmare, puteți „dizolva” elementul.

Te-ar putea interesa:

Un efect similar poate fi obținut folosind metoda fadeTo(), a cărei gamă de influență este și mai largă. 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ă timpul în care va avea loc animația. Acesta poate fi un număr care indică numărul de milisecunde sau unul dintre cuvintele cheie:

• „rapid” (200 ms);
• „lent” (600 ms);

Dacă durata nu este setată, aceasta va fi implicită la 400 de milisecunde.

Parametrul de apel invers denotă 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 easing controlează funcția de sincronizare a animației, adică viteza acesteia în funcție de timp. Cu ajutorul acestuia, 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 la funcția „swing”.

În exemplul următor, jQuery fadeIn() va crește treptat opacitatea unui element cu clasa .block timp de o secundă, după care va imprima un mesaj în consolă:

$(".block").fadeIn(1000, linear, function() ( console.log("Animation complete"); ));

Dacă parametrii enumerați nu sunt suficienți, metodei i se poate transmite un obiect de configurare, care poate conține până la 11 setări diferite.

Funcții de apel invers

Parametrul callback transmis metodei jQuery fadeIn() este o opțiune foarte utilă deoarece modificarea proprietății se face asincron, fără a bloca fluxul general de cod.

const callback = function() ( console.log("Animation completed"); ); $(".element").fadeIn(1000); sună din nou();

Î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 un argument de apel invers pentru a prinde sfârșitul animației:

const callback = function() ( console.log("Animation completed"); ); $(".element").fadeIn(1000, callback);

Acum un mesaj va fi tipărit pe consolă numai atunci când elementul devine complet vizibil.

Transparență deplină și ascunderea unui element

După cum știți, o valoare 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 bloc.

Prin urmare, metodele de fade ale bibliotecii 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ă.

În acest tutorial ne vom uita la un exemplu de schimbare a transparenței JQuery. Subiecte similare au fost deja discutate în lecție, ei bine, principiul funcționării scenariului s-a bazat pe un simplu CSSȘi html, în această lecție vom aborda și JQueryÎn plus, a existat o simplă schimbare a imaginii la trecerea cu mouse-ul, 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ă scenariile. Să ne uităm acum la codul acestui tutorial.

Primul pas. HTML.

Și așa avem un dosar index.php.

În el, mai întâi includem biblioteca jquery.js. Descărcați-l pentru dvs. și conectați-l între etichete cap.

​

În continuare ne vom uita JQyery cod care va interacționa cu clasa img. Mai întâi, scriem o funcție care are clasa imgși setați transparența 50% în poziţia sa iniţială. Adică imaginea fără să o îndrepte are jumătate din transparență. Apoi, atunci 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 de-opacă. După ce vizarea imaginii 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() ( // setați transparența imaginii la 50% $(".img").css("opacity","0.5"); // treceți 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.

Înregistrați eticheta divși da-i o clasă imagini vom indica câteva stiluri în ea CSS pentru imagine (opțional, este mai ușor să vedeți cum funcționează acest script). Acum să adăugăm o etichetă imgîn el indicăm calea către imagine și setăm clasa img, care interacționează cu JQuery codul de mai sus.

Unele stiluri CSS pentru o mai bună claritate.

Imagini (chenar: 1px solid #363636; lățime: 300px; culoarea fundalului: #2d2d2d; umplutură: 8px; )

Scriptul este simplu de acest fel, ceea ce îl face mai relevant în aplicarea modificărilor de transparență a imaginii la trecerea cu mouse-ul. Vă sfătuiesc să vă jucați cu JQyery cod, unde există trei funcții: inițial, când treceți cu mouse-ul și când treceți. Se va putea arăta diversitatea. Să spunem că în poziția inițială indică opacitate 0,5, la hover opacitate 1.0, și de la eliminarea îndrumării opacitate 0,2. Acest lucru va avea ca rezultat niște acțiuni foarte interesante cu imaginea!