Glatka promjena boje pozadine. Kako promijeniti boju pozadine: nakon pseudo klase sa jQuery? Jquery promijeni boju

U ovoj lekciji ćemo govoriti o efektu u kojem se pozadina objekta glatko mijenja kao rezultat prelaska kursora miša preko njega.
Prvo, kao što ste se vjerovatno već navikli (ako vam ovo nije prvi put da koristite jQuery biblioteku), povezujemo jQuery sa našom web lokacijom.
Pored samog jQueryja, potreban nam je i jQuery UI.

Ako ste upoznati sa jQuery principima, zapamtite da u zaglavlje moramo postaviti pozivni kod, u ovom slučaju animaciju promjene boje, tako da se učita prije učitavanja glavnog sadržaja stranice. $(document).ready(function() ( // stavite svoj pozivni kod animacije ovdje));

HTML

Evo primjera html markupa.

Promjena boje pozadine elementa Animacija promjene boje pri lebdenju / PC igre / Portal 2 Portal 2

Originalni Portal je već kultna stvar i neočekivana za svoje vrijeme. To samo još jednom potvrđuje provjerenu tezu o trijumfu ideja nad naprednim tehnologijama.

CSS

CSS stilovi za našu stranicu izgledaju ovako.

PNG); text-align:left; boja:#333; širina:800px; font-size:14px; font-family: Georgia, "time new romances", serif; margin:0 auto; padding:0; ) a( boja:#333; text-decoration:none ) a:focus (outline: none;) h1 (veličina fonta: 34px; porodica fontova: verdana, helvetica, arial, sans-serif; razmak između slova:- 2px; boja:#394BEA; font-weight:700; padding:20px 0 0; text-shadow:0 1px 1px #70C5ED; ) h2 (font-size: 24px; font-family: verdana, helvetica, arial, sans- serif; boja:#5C81CB; font-weight: 400; padding: 0 0 10px; text-shadow:0 1px 1px #70C5ED; ) h3, h3 a( font-size:14px; font-family:verdana, helvetica, arial , sans-serif; razmak između slova:-1px; boja:#333; font-weight: 700; text-transform:uppercase; margin:0; padding:8px 0 8px 0; ) p ( boja:#333; float: left; line-height:22px; margin:5px; padding:0 0 10px; ) #container ( margin: 0; padding: 0; ) .boxes ( background:#fff; border:1px solid #ccc; float:left; padding:10px; position:relative; width:600px; ) img ( border:5px solid #CCCCCC; ) div.info ( border-bottom:1px solid #CCCCCC; float:left; margin:0; padding:0; width: 100%; ) .block (boja:#0066CC; float:left; overflow:hidden; pozicija:relativna; širina:600px; ) .block h4, .block h4 a( boja:#333333; font-size:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform:uppercase; )

JS

DIV element sa klasom .boxes je element, blok, čiju boju želimo da promenimo.
Ovo je kod koji ćemo pozvati u zaglavlju.

$(document).ready(function())( $(.boxes").hover(function() ( $(this).stop().animate(( backgroundColor: "#40B8FE"), 800); ) , function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 800); )); )); Parametri backgroundColor postavljaju boju, a vrijednost 800 je brzina animacije.

Postoji sloj sa tekstom i dugmetom, kada kliknete na njega, potrebno je da promenite boju teksta na ovom sloju.

Promijeni boju (jQuery) $(document).ready(function())( $("#color_change").click(function())( $("#layer").css("color", "#F00" ); )) )); #layer (border:#CCC 1px solid; line-height:1.5; padding:10px 20px; width:800px; margin-top:20px;) Ali da shvatite odakle dolazi ova zabluda ljudi koji osuđuju zadovoljstvo i hvale bol , otkriću vam cijelu sliku i objasniti šta je tačno rekao ovaj čovjek koji je otkrio istinu, kojeg bih nazvao arhitektom srećnog života. Zaista, niko ne odbacuje, prezire ili izbjegava užitke samo zato što su užici, već samo zato što oni koji ne znaju kako se racionalno prepustiti zadovoljstvima trpe veliku patnju. Kao što nema nikoga ko bi volio, preferirao i žudio samu patnju samo zato što je patnja, a ne zato što se ponekad jave okolnosti kada patnja i bol donose neko značajno zadovoljstvo. Da se poslužimo jednostavnim primjerom, tko bi se od nas bavio bilo kakvom napornom tjelesnom vježbom da to ne donosi neku korist? I ko bi mogao opravdano kriviti nekoga ko teži zadovoljstvu koje sa sobom ne bi donelo nevolje, ili nekoga ko bi izbegao bol koji sa sobom ne bi doneo nikakvo zadovoljstvo?

Danas ćemo naučiti kako napraviti glatku promjenu boje bloka koristeći CSS i JQuery. Pomoću ovog dodatka možete postići zapanjujuće lijepe rezultate dizajna. Na primjer, možete napraviti cool meni koji će glatko mijenjati boju kada pređete preko njega, a vjerujte mi, izgleda jako lijepo.

JQuery

Za početak, između oznaka i morate staviti sljedeće:

Zatim, ponovo između oznaka, kopiramo ovu skriptu:

$(document).ready(function())( $(.Box").hover(function() ( $(this).stop().animate(( backgroundColor: "#FF4500"), 400); ) , function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 400); )); ));

Gdje je .Box blok klasa koju smo smislili gore u CSS-u.

“#FF4500” - boja lebdenja. 400 — brzina animacije pri lebdenju.

“#ffffff” je početna boja nakon pomicanja kursora. 400 — brzina animacije pri pomicanju kursora.

HTML

Nakon što uradite sve kako je gore napisano, boja bloka će se postepeno mijenjati. Da biste umetnuli takav blok na stranicu, samo trebate dodati sljedeće na pravo mjesto:

I blok će se pojaviti.

Bitan

Ovaj dodatak može promijeniti samo boju pozadine. Na primjer, nećete ga moći priložiti vezama ili tekstu. Još jedan dodatak mijenja boju linkova (uskoro ću svakako napisati kako to učiniti).

Ako želite da blokovi na stranici imaju različite boje, poput moje, morat ćete postaviti nekoliko skripti u nizu između oznaka i, shodno tome, ne zaboravite promijeniti boju u željenu. Najvažnije je promijeniti klasu, na primjer u našem primjeru iznad - klasa Box, a sljedeća skripta bi trebala biti s drugom klasom, na primjer Box1, pa Box2 i tako dalje.

To je sve, dragi prijatelji. Ako vam ništa nije jasno, obavezno pitajte u komentarima. Vidimo se uskoro.

Nekako, kada sam se suočio sa potrebom da napišem efekat teksta koji teče iz jedne boje u drugu, neočekivano sam za sebe otkrio da to i nije tako trivijalan zadatak.

Možete ostaviti kvačicu samo nasuprot Effects Core. Upravo ovaj modul proširuje metodu jQuery.animate() koja nam je potrebna; samo trebate povezati preuzeti sklop:

Nakon toga, boja teksta, okvira ili pozadine bilo kojeg elementa stranice je dostupna za animaciju.

Korak 2. Kašnjenje između animacija elemenata.

Sada kada je sve u redu s animacijom, postoji druga značajka koja komplikuje zadatak - dodati kašnjenje između animacije elemenata kolekcije.

Recimo da imamo kolekciju numerisanih elemenata liste:

Var $elements = $("ol > li");

Animacija svakog sljedećeg elementa kolekcije treba početi s određenim zakašnjenjem nakon prethodnog.

Možete postići željeni rezultat koristeći sljedeći kod:

Za (var i = 0; i

Imajte na umu da setTimeout() kao svoj prvi parametar uzima funkciju koja vraća drugu funkciju.

Ako se to ne uradi, tada će varijabla i biti proslijeđena referencom i kada dođe vrijeme izvršenja funkcije tajmera, imat ću posljednju vrijednost jednaku $elements.length , pošto će do ovog trenutka petlja for završiti i animacija neće biti izvršena uopšte.

Koristeći ugniježđenu funkciju, time kopiramo vrijednost i na svakoj iteraciji petlje, uz pomoć koje postižemo ispravan rad planirano.

zaključci

Možete koristiti takvu animaciju, na primjer, da pokažete da u nekoj listi parametara morate odabrati barem jedan, ili jednostavno da biste skrenuli pažnju na neki blok stranice.