Tasainen taustavärin muutos. Kuinka muuttaa taustaväriä: pseudo-luokan jälkeen jQuerylla? Jquery vaihtaa väriä

Tällä oppitunnilla puhumme vaikutuksesta, jossa kohteen tausta muuttuu tasaisesti, kun hiiren osoitinta viedään sen päälle.
Ensinnäkin, kuten olet todennäköisesti jo tottunut (jos tämä ei ole ensimmäinen kerta, kun käytät jQuery-kirjastoa), yhdistämme jQueryn sivustoomme.
Itse jQueryn lisäksi tarvitsemme myös jQuery-käyttöliittymän.

Jos olet perehtynyt jQueryn periaatteisiin, kannattaa muistaa, että otsikkoon tulee laittaa kutsukoodi, tässä tapauksessa värinmuutosanimaatio, jotta se latautuu ennen kuin sivun pääsisältö latautuu. $(document).ready(function() ( // laita animaation kutsukoodi tähän ));

HTML

Tässä on esimerkki html-merkinnöistä.

Elementin taustavärin muuttaminen Värin muuttuva animaatio hoverissa / PC-pelit / Portal 2 Portaali 2

Alkuperäinen portaali on jo kulttiasia ja aikansa odottamaton. Se vahvistaa vain jälleen kerran ajan koetteleman väitteen ideoiden voitosta edistyneistä teknologioista.

CSS

Sivumme CSS-tyylit näyttävät tältä.

Png); text-align:left; väri:#333; leveys: 800px; kirjasinkoko: 14px; font-family:georgia, "aika uudet romanssit", serif; marginaali:0 auto; täyte: 0; ) a( color:#333; text-decoration:none ) a:focus (ääriviivat: ei mitään; ) h1 (fontin koko: 34px; fonttiperhe: verdana, helvetica, arial, sans-serif; kirjainvälit:- 2px; väri:#394BEA; font-weight:700; täyttö:20px 0 0; text-hadow:0 1px 1px #70C5ED; ) h2 (fonttikoko: 24px; kirjasinperhe: verdana, helvetica, arial, sans- serif; väri: #5C81CB; fontin paino: 400; täyte: 0 0 10px; tekstin varjo: 0 1px 1px #70C5ED; ) h3, h3 a( font-size: 14px; font-family:verdana, helvetica, arial , sans-serif; kirjainväli: -1px; väri:#333; fontin paino: 700; tekstin muunnos:isot kirjaimet; marginaali:0; täyte:8px 0 8px 0; ) p ( väri:#333; float: vasen; rivin korkeus: 22 kuvapistettä; marginaali: 5 kuvapistettä; täyttö: 0 0 10 kuvapistettä; ) #container ( margin: 0; täyttö: 0; ) .boxes ( tausta: #fff; reunus: 1px kiinteä #cc; float:vasen; täyte: 10px; sijainti: suhteellinen; leveys: 600px; ) img ( reunus: 5px kiinteä #CCCCCC; ) div.info ( border-bottom: 1px kiinteä #CCCCCC; float:vasen; marginaali: 0; täyte: 0; leveys: 100%; ) .block ( color:#0066CC; kellua:vasen; ylivuoto piilotettu; sijainti:suhteellinen; leveys: 600px; ) .block h4, .block h4 a(väri:#333333; font-size:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform: iso kirjaimet; )

JS

DIV-elementti, jossa on luokka .boxes, on elementti, lohko, jonka väriä haluamme muuttaa.
Tämä on koodi, jota kutsumme otsikossa.

$(document).ready(function())( $(.boxes").hover(function() ( $(this).stop().animate(( backgroundColor: "#40B8FE"), 800; ) , function() ( $(this).stop().animate(( taustaväri: "#ffffff" ), 800); )); )); backgroundColor-parametrit asettavat värin ja arvo 800 on animaation nopeus.

On kerros, jossa on tekstiä ja painike, kun napsautat sitä, sinun on vaihdettava tämän kerroksen tekstin väriä.

Muuta väriä (jQuery) $(document).ready(function())( $("#color_change").click(function())( $("#layer").css("väri", "#F00" ) )) )); #kerros (reunus: #CCC 1px kiinteä; rivin korkeus: 1,5; täyte: 10px 20px; leveys: 800px; margin-top: 20px;) Mutta jotta ymmärrät, mistä tämä mielihyvää tuomitsevien ja kipua ylistävien ihmisten väärinkäsitys on peräisin , paljastan sinulle koko kuvan ja selitän tarkalleen, mitä tämä totuuden löytänyt mies, jota kutsuisin onnellisen elämän arkkitehdiksi, sanoi. Todellakin, kukaan ei hylkää, halveksi tai välttele nautintoja vain siksi, että ne ovat nautintoja, vaan vain siksi, että ne, jotka eivät osaa rationaalisesti nauttia nautinnoista, kärsivät suurta kärsimystä. Aivan kuten ei ole ketään, joka rakastaisi, mieluummin ja kaipaisi itse kärsimystä vain siksi, että se on kärsimystä, eikä siksi, että joskus syntyy olosuhteita, jolloin kärsimys ja kipu tuottavat huomattavaa nautintoa. Yksinkertaisella esimerkillä, kuka meistä harjoittaisi minkäänlaista raskasta fyysistä harjoitusta, jos siitä ei olisi mitään hyötyä? Ja kuka voisi oikeutetusti syyttää jotakuta, joka pyrkii nautintoon, joka ei tuo mukanaan ongelmia, tai jotakuta, joka välttäisi kipua, joka ei tuo mukanaan mitään nautintoa?

Tänään opimme tekemään sujuvan muutoksen lohkon väriin CSS:n ja JQueryn avulla. Tämän laajennuksen avulla voit saavuttaa hämmästyttävän kauniita suunnittelutuloksia. Voit esimerkiksi tehdä hienon valikon, joka vaihtaa väriä sujuvasti, kun viet hiiren päälle, ja usko minua, se näyttää erittäin kauniilta.

JQuery

Aluksi tagien väliin ja sinun on laitettava seuraava:

Sitten kopioimme tämän skriptin uudelleen tagien väliin:

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

Missä .Box on lohkoluokka, jonka keksimme edellä CSS:ssä.

"#FF4500" - leijuva väri. 400 - animaation nopeus leijuttaessa.

"#ffffff" on alkuväri kohdistimen siirtämisen jälkeen. 400 — animaation nopeus siirrettäessä kohdistinta poispäin.

HTML

Kun olet tehnyt kaiken yllä kirjoitetulla tavalla, lohkon väri muuttuu vähitellen. Jos haluat lisätä tällaisen lohkon sivulle, sinun on vain lisättävä seuraava oikeaan paikkaan:

Ja lohko tulee näkyviin.

Tärkeä

Tämä laajennus voi muuttaa vain taustaväriä. Et voi esimerkiksi liittää sitä linkkiin tai tekstiin. Toinen liitännäinen muuttaa linkkien väriä (kirjoitan ehdottomasti kuinka se tehdään pian).

Jos haluat, että sivun lohkot ovat erivärisiä, kuten minun, sinun on asetettava useita skriptejä peräkkäin tunnisteiden väliin ja vastaavasti älä unohda muuttaa väriä haluttuun. Tärkeintä on vaihtaa luokkaa, esimerkiksi yllä olevassa esimerkissämme - Box-luokka, ja seuraavan skriptin tulee olla eri luokassa, esimerkiksi Box1, sitten Box2 ja niin edelleen.

Siinä kaikki, rakkaat ystävät. Jos et ymmärrä mitään, muista kysyä kommenteissa. Nähdään pian.

Jotenkin, kun kohtasin tarpeen kirjoittaa väristä toiseen virtaavan tekstin vaikutus, huomasin yllättäen itselleni, että tämä ei ole niin triviaali tehtävä.

Voit jättää valintamerkin vain Effects Coren kohdalle. Tämä moduuli laajentaa tarvitsemamme jQuery.animate()-menetelmää; sinun tarvitsee vain liittää ladattu kokoonpano:

Tämän jälkeen minkä tahansa sivuelementin tekstin, kehyksen tai taustan väri on käytettävissä animaatioon.

Vaihe 2. Viive elementtianimaatioiden välillä.

Nyt kun kaikki on kunnossa animaation kanssa, on toinen ominaisuus, joka vaikeuttaa tehtävää - lisätä viivettä kokoelmaelementtien animaation välille.

Oletetaan, että meillä on kokoelma numeroituja luetteloelementtejä:

Muutt $elementit = $("ol > li");

Kokoelman jokaisen seuraavan elementin animaation tulee alkaa tietyllä viiveellä edellisen jälkeen.

Voit saavuttaa halutun tuloksen käyttämällä seuraavaa koodia:

For (var i = 0; i

Huomaa, että setTimeout() ottaa ensimmäiseksi parametriksi funktion, joka palauttaa toisen funktion.

Jos näin ei tehdä, muuttuja i välitetään viitteellä ja kun ajastintoiminnon suoritusaika koittaa, sen viimeinen arvo on $elements.length , koska tähän hetkeen mennessä for-silmukka on päättynyt ja animaatio ei teloiteta ollenkaan.

Sisäkkäistä funktiota käyttämällä kopioimme siten i:n arvon jokaisessa silmukan iteraatiossa, jonka avulla saavutamme oikea toiminta suunniteltu.

johtopäätöksiä

Voit käyttää tällaista animaatiota esimerkiksi osoittamaan, että jostain parametriluettelosta sinun on valittava vähintään yksi, tai yksinkertaisesti kiinnittääksesi huomion johonkin sivun lohkoon.