Jquery glatka promjena transparentnosti. jQuery fadeIn() funkcija: promjena transparentnosti elementa

U ovom vodiču ćemo pogledati primjer promjene JQuery transparentnosti. O sličnim temama se već raspravljalo u lekciji, pa, princip rada skripte zasnivao se na jednostavnom CSS I html, u ovoj lekciji ćemo se takođe dotaknuti JQuery plus, došlo je do jednostavne promjene slike pri lebdenju, transparentnost se odmah vrši ( neprozirnost).

Mislim da ste već pogledali dva demo-a i shvatili razliku u tome kako skripte rade. Pogledajmo sada kod za ovaj tutorijal.

Prvi korak. HTML.

I tako imamo fajl index.php.

U njega prvo uključujemo biblioteku jquery.js. Preuzmite ga za sebe i povežite ga između oznaka glava.

​

Dalje ćemo pogledati JQyery kod koji će komunicirati sa klasom img. Prvo, pišemo funkciju koja ima klasu img i postavite transparentnost 50% u svom prvobitnom položaju. To jest, slika bez pokazivanja na nju ima polovinu svoje transparentnosti. Zatim, kada se izvrši radnja lebdenja na slici, poziva se funkcija koja mijenja poziciju klase img u de-opaque položaj. Nakon što je ciljanje slike završeno, funkcija se prebacuje u prvobitni početni položaj. Atribut transparentnosti slike neprozirnost. Možete ga detaljno proučiti u dokumentaciji za CSS.

$(function() ( // postavite prozirnost slike na 50% $(".img").css("opacity","0.5"); // postavite pokazivač miša preko slike $(".img"). hover( function () ( // nakon čega prozirnost nestaje $(this).stop().animate(( opacity: 1.0 ), "slow"); ), // nakon uklanjanja miša preko funkcije slike () ( // prozirnost se vraća na početnu poziciju 50% $(this).stop().animate(( opacity: 0.5), "slow" ));

Drugi korak. CSS stil fajl.

Registrirajte oznaku div i daj mu čas slike u njemu ćemo naznačiti neke stilove CSS za sliku (opcionalno, samo da biste bolje vidjeli kako ova skripta funkcionira). Sada dodajmo oznaku img u njemu označavamo putanju do slike i postavljamo klasu img, koji je u interakciji sa JQuery kod iznad.

Neki stilovi CSS radi bolje jasnoće.

Slike (obrub: 1px solid #363636; širina: 300px; boja pozadine: #2d2d2d; padding: 8px; )

Skripta je jednostavna te vrste, što je čini relevantnijom u primjeni promjena transparentnosti slike pri lebdenju. Savjetujem ti da se igraš JQyery kod, gdje postoje tri funkcije: početna, kada lebdi i kada se poništi. Biće moguće pokazati raznolikost. Recimo u početnoj poziciji naznačiti neprozirnost 0,5, na lebdenju neprozirnost 1.0, i od uklanjanja smjernica neprozirnost 0,2. Ovo će rezultirati nekim vrlo zanimljivim radnjama sa slikom!

Animacija na modernim web stranicama odavno je postala nešto što se podrazumijeva. Rastvarajući elementi, iskačuće poruke, klizne galerije slika poboljšavaju korisničko iskustvo i povećavaju performanse stranice. U popularnoj jQuery javascript biblioteci, fadeIn() je jedna od osnovnih funkcija animacije. Kontrolira transparentnost blokova.

Fade efekti

FadeIn() metoda osigurava da se transparentnost elementa koji mu se prosljeđuje promijeni na 100%. U jQuery biblioteci je uparen sa funkcijom fadeOut(), s kojom možete resetirati prozirnost i na taj način "rastvoriti" element.

Možda će vas zanimati:

Sličan efekat se može postići korišćenjem metode fadeTo(), čiji je opseg uticaja još širi. FadeTo() može postaviti bilo koju vrijednost transparentnosti između 0 i 1.

Sintaksa metode

jQuery metoda fadeIn() se poziva u kontekstu elementa čiju transparentnost treba promijeniti. Može uzeti od nula do tri parametra:

element.fadeIn(); element.fadeIn(duration); element.fadeIn(trajanje, povratni poziv); element.fadeIn(trajanje, ublažavanje, povratni poziv); element.fadeIn(config);

Argument duration specificira vrijeme tokom kojeg će se animacija pojaviti. Ovo može biti broj koji označava broj milisekundi ili jedna od ključnih riječi:

• "brzo" (200ms);
• "sporo" (600ms);

Ako trajanje nije podešeno, podrazumevano će biti 400 milisekundi.

Parametar povratnog poziva označava funkciju koja će biti pozvana odmah nakon završetka animacije. Funkcija povratnog poziva ne prihvata nikakve parametre. Ova varijabla unutar nje se odnosi na DOM čvor koji se mijenja.

Argument easing kontrolira funkciju vremena animacije, odnosno njenu brzinu ovisno o vremenu. Uz njegovu pomoć možete ubrzati početak i usporiti kraj animacije ili je učiniti ujednačenom kroz cijelu animaciju. Vrijednost argumenta je niz koji sadrži ključnu riječ, zadanu funkciju "swing".

U sljedećem primjeru, jQuery fadeIn() će postepeno povećavati neprozirnost elementa sa klasom .block za jednu sekundu, nakon čega će ispisati poruku u konzoli:

$(".block").fadeIn(1000, linear, function() ( console.log("Animacija završena"); ));

Ako navedeni parametri nisu dovoljni, metodi se može proslijediti konfiguracijski objekt, koji može sadržavati do 11 različitih postavki.

Funkcije povratnog poziva

Parametar povratnog poziva proslijeđen metodi jQuery fadeIn() je vrlo korisna opcija jer se promjena svojstva vrši asinhrono, bez blokiranja ukupnog toka koda.

const callback = function() ( console.log("Animacija je završena"); ); $(".element").fadeIn(1000); callback();

U ovom primjeru, funkcija će se pokrenuti odmah nakon pokretanja animacije, bez čekanja da se element u potpunosti pojavi.

Da bi sve funkcioniralo kako je predviđeno, trebali biste koristiti argument povratnog poziva da uhvatite kraj animacije:

const callback = function() ( console.log("Animacija je završena"); ); $(".element").fadeIn(1000, povratni poziv);

Sada će poruka biti ispisana na konzoli samo kada element postane potpuno vidljiv.

Potpuna transparentnost i skrivanje elementa

Kao što znate, nulta vrijednost svojstva neprozirnosti ne uklanja element sa stranice, već ga samo čini nevidljivim. Ovo ponašanje nije prikladno ako želimo sakriti neki blok.

Stoga, metode fade jQuery biblioteke fadeIn(), fadeTo() i fadeOut() rade sa transparentnošću u kombinaciji sa svojstvom prikaza. Potpuno transparentan element je skriven korištenjem pravila display: none, a prije nego što se pojavi, ovo pravilo se poništava.

U ovoj lekciji želim da vam predstavim efekat transparentnosti slika i teksta. Efekat, čini mi se, nije loš i vredan je pažnje. Služi, naravno, kao i mnogi drugi efekti, da privuče malo više pažnje posjetitelja vaše stranice na jedan ili drugi dio teksta ili na sliku.

Za implementaciju ovog efekta na svoju web stranicu potrebno vam je:

2. Raspakujte arhivu u trenutni folder na vašem računaru. U folderu transparentnosti vidjet ćete:

• mapa slika sa slikom;
• js folder sa jQuery;
• datoteka demo1.html;
• fajl demo2.html.

3. U pretraživaču koji koristite, otvorite datoteke demo1.html i demo2.html jedan po jedan, provjerite skriptu.

4. Učitajte sadržaj foldera sa slikama i js u istoimene foldere na vašem sajtu. Ove fascikle se nalaze u osnovnom folderu sajta. Ako ih nemate, morate ih kreirati.

Transparentnost slike koristeći jQuery

Demo primjer:

Umetanje koda na stranicu web stranice

jQuery odjeljak koda veze
()
i umetnite skriptu iz datoteke demo1.html, koja je prikazana u tabeli ispod, u glavu. Također možete umetnuti cijelu strukturu ispod u tijelo, budući da se skripte mogu postaviti u različite verzije. Na primjer, imate web stranicu na PHP-u i nema posebne želje da zatrpavate HEADER datoteku jednokratnim skriptama.

Ako ste već povezali najnoviju ili noviju verziju jQuery biblioteke (verzija 3.1.1 na dan kada je članak objavljen) ili koristite udaljenu vezu najnovije verzije sa jQuery web stranice ili Google API-ja, naravno, ne bi trebalo ponovo povezati.

$(document).ready(function())( $(.limp").each(function())( $(this).animate((opacity:"0.3"),1); $(ovo). mouseover( function())( $(this).stop().animate((opacity:"1.0"),600); )); ().animate ((prozirnost:"0.3"));

Putanja do datoteke biblioteke jQuery;

U ovom redu limp je ime klase za kreiranje transparentnosti;

Ova linija postavlja početnu transparentnost elementa;

Ova linija postavlja transparentnost elementa kada lebdite kursorom;

Ova linija postavlja transparentnost kada kursor napusti element.

I umetnite kod slike u tijelo na mjesto koje odredite:

images/image.jpg " class="limp" vspace="XX " hspace="XX " width="XXX " height="XXX " alt="Naziv"> !}

Ovdje upišite putanju do slike, uvlake, dimenzije i naslov. Sve!

Transparentnost teksta u jQueryju

Demo primjer: Moja stranica je lična stranica koja vam daje centralnu lokaciju za upravljanje i pohranjivanje vaših dokumenata, sadržaja, veza i kontakata. Moja stranica služi kao kontaktna tačka za druge korisnike u vašoj organizaciji da pronađu informacije o vama i vašim vještinama i interesovanjima. Dobavljači sadržaja mogu koristiti My Site kao metodu prilagođavanja informacija koje predstavljaju korisnicima.

Umetanje koda na stranicu web stranice:

Ovdje su sve radnje slične prvoj opciji. Samo, umjesto koda slike, ubacite kod sa tekstom (u donjoj tabeli) - na pravo mjesto u dijelu tijela:

Moja stranica je lična stranica.

Ovdje napišite svoj tekst.

Hvala na pažnji. Komentirajte članak. Sve najbolje tebi. Vidimo se uskoro! Srdačan pozdrav, L.M.

Definicija i primjena jQuery efekata

Metoda jQuery .fadeTo() vam omogućava da promijenite nivo transparentnosti odabranih elemenata.

Metoda .fadeTo() je slična metodi .fadeIn(), ali za razliku od nje, omogućava vam kontrolu željenog nivoa transparentnosti elemenata.

jQuery sintaksa: 1.0 sintaksa: $(selector).fadeTo( trajanje, neprozirnost, kompletan) trajanje- Broj ili niz neprozirnost- Broj (0 - 1) kompletan- Sintaksa funkcije 1.4.3: $(selector).fadeTo( trajanje, neprozirnost, popuštanje, kompletan) trajanje- Broj ili niz neprozirnost- Broj (0 - 1) popuštanje- Žica kompletan- Funkcija dodana u jQuery 1.0 (sintaksa ažurirana u verziji 1.4.3) Vrijednosti parametara Opis parametra

trajanje	String ili numerička vrijednost koja određuje koliko će dugo animacija trajati. Zadana vrijednost je 400 (u milisekundama). Ključne riječi niza "brzo" i "sporo" odgovaraju 200 i 600 milisekundi (visoke vrijednosti označavaju sporu animaciju, niže vrijednosti ukazuju na brzu animaciju).
neprozirnost	Numerička vrijednost između 0 I 1 , što ukazuje na transparentnost za element ( 1 - element je neproziran, 0.5 - prosječna vrijednost, 0 - element je potpuno transparentan).
popuštanje	Ključna riječ (string) koja definira krivulju brzine za animaciju (pomoću matematičke funkcije - kubične Bezierove krive). Bez korištenja vanjskih dodataka ima samo dva značenja - linearno(efekat animacije istom brzinom od početka do kraja) i swing(efekat animacije ima spor početak i spor kraj, ali se brzina povećava u sredini animacije). Zadana vrijednost swing.
kompletan	Funkcija koja će se izvršiti nakon što se animacija završi, poziva se jednom za svaki odgovarajući element. Unutar funkcije, varijabla this se odnosi na DOM element na koji je primijenjena animacija.

Primjer upotrebe Primjer korištenja jQuery .fadeTo() metode

div ( display : inline-block ; širina : 75px ; /* širina elementa */ visina : 150px ; /* visina elementa */ margin-right : 20px ; /* desna margina */ background-color : zelena ; /* boja pozadine */ )

$("div").fadeTo(1000, 0.5, "linearno"); // linearno mijenjamo transparentnost elemenata na 0,5 u jednoj sekundi ) );

) ); 0,5 Method.fadeTo() 1000 .fadeTo() prije

u jednoj sekundi (

milisekundi). Imajte na umu da je skriveni element vidljiv, to se može izbjeći korištenjem svojstva vidljivosti sa vrijednošću hidden ili korištenjem selektora koji ne utječu na potrebne elemente.

Rezultat našeg primjera:

Razmotrimo sljedeći primjer u kojem smo postavili fadeTo() metod povratnog poziva na funkciju:

$(document).ready(function ()( $(".fadeto ").click(function ()( // postavlja funkciju kada se klikne na element sa preklopnom klasom var br= 0; // varijabla (za umetanje broja elementa) $("div ").fadeTo(500 , 0.4 , "linear", function ()( // linearno promijenimo transparentnost elemenata na 0,4 u pola sekunde i pozovimo funkciju num++; //povećaj varijablu za 1 (povećaj) $(this).text( br); // dodajemo vrijednost varijable elementu na koji je primijenjena animacija) );

) ); 0,4 ) ); 500 Method.fadeTo()

U ovom primjeru, koristeći jQueryjevu .fadeTo() metodu, kada se klikne na dugme, linearno mijenjamo neprozirnost elemenata u

za pola sekunde (

milisekundi). Dodatno, kada je animacija završena, pozivamo funkciju koja dodaje vrijednost promjenljive svakom elementu. Imajte na umu da se unutar funkcije varijabla this odnosi na DOM element na koji je primijenjena animacija, omogućavajući nam da povećavamo sadržaj teksta svakog elementa jedan po jedan.
Rezultat našeg primjera.
Mijenja nivo transparentnosti odabranih elemenata na stranici. Omogućava vam da glatko promijenite transparentnost. Metoda ima dvije namjene:

duration — trajanje promjene transparentnosti. Može se navesti u milisekundama ili kao vrijednost niza "brzo" ili "sporo" (200 i 600 milisekundi).
neprozirnost — vrijednost potrebne transparentnosti. Mora biti naveden kao broj od 0 do 1 (0 - puna transparentnost, 1 - nema transparentnosti).
povratni poziv je funkcija specificirana kao rukovalac za dovršavanje promjene transparentnosti. Ne prosljeđuje se nikakvi parametri, međutim, unutar funkcije, varijabla this će sadržavati DOM objekt elementa čija se transparentnost mijenja. Ako postoji nekoliko takvih elemenata, rukovalac će biti pozvan zasebno za svaki element.
trajanje - vidi opis iznad. Podrazumevano, parametar je 400

• neprozirnost - vidi gore.
• easing — dinamika promjena u transparentnosti (da li će se usporiti pred kraj izvršenja ili, naprotiv, ubrzati). (vidi opis)
• povratni poziv - vidi gore.
• promijeniti transparentnost
• postavite transparentnost elementa
• postavite nivo transparentnosti elementa