JQuery-tehosteet - Top12 jQuery-efektimenetelmien erityypit

• Johdatus jQuery-tehosteisiin

Johdatus jQuery-tehosteisiin

jQuery on yksi suosituimmista javascript-kirjastoista, jonka tarkoituksena on yksinkertaistaa HTML DOM: ää, ts. dokumenttiobjektimallin ominaisuuksia, kuten käsittely ja puun kulku. Myös muita ominaisuuksia, kuten tapahtumien käsittely, Ajax ja CSS -animaatiot, on yksinkertaistettu. Se on avoimen lähdekoodin ja ilmainen kirjasto, jota käytetään tyypillisesti 73 prosentilla nykyisistä 10 miljoonasta verkkosivustosta. JQueryn pääominaisuuksiin kuuluvat DOM-elementtipohjaiset valitsimet, manipulointi ja läpikulku, mikä tekee jQueryllä työskentelystä paljon helpompaa ja kätevämpää. Tässä aiheessa aiomme oppia jQuery Effectsistä.

Sitä käytetään tarjoamaan hyvin yksinkertaisen näköinen käyttöliittymä erilaisten hämmästyttävien tehosteiden tekemiseen. Nämä menetelmät antavat mahdollisuuden nopeasti käyttää ja soveltaa yleisimmin käytettyjä ominaisuustehosteita sekä vähimmäiskonfiguraatioita. Elementtien näyttämisen ja piilottamisen komento on melkein sama kuin mitä kuka tahansa halukas näkemään ne odottaisi. Show () -komentoa käytetään elementtien näyttämiseen kokonaan käärittynä, ja hide () -komentoa käytetään niiden piilottamiseen.

Erilaiset jQuery-efektimenetelmät:

Tässä keskustellaan eräistä erityyppisistä jQuery-efektimenetelmistä

1) Animoi ()

Animaatiomenetelmää käytetään mukautetun animaation suorittamiseen CSS-ominaisuuksien joukolle. Tätä menetelmää käytetään muuttamaan elementin tila tilasta toiseen yhdessä CSS-tyylien kanssa. Kiinteistön arvoa muutetaan vähitellen siten, että animoitu vaikutus voidaan saavuttaa. Huomattava asia on, että vain numeerisia arvoja voidaan animoida, kuten marginaali: 40px. Toisaalta merkkijonojen arvoja ei voida animoida, kuten taustaväri: vihreä. Tähän sisältyy jälleen poikkeus jousille, kuten show, piilota ja vaihda.

Syntaksi

(selector).animate((styles), duration, easing, callback)

esimerkki

$("label").click(func()(
$("#box").animate((height: "100px"));
));

2) Viive ()

Kuten nimestä voi päätellä, tätä käytetään asettamaan viive kaikille toiminnoille, jotka ovat jonossa valituille elementeille.

Syntaksi

$(selector).delay(duration, NameOfQueue)

esimerkki

$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));

3) fadeToggle ()

Tätä toimintoa käytetään siirtymään fade in- ja fade -toimintojen välillä eri ruuduissa. Jos jokin elementti häviää, tätä funktiota fadeToggle () voidaan käyttää niiden haalistamiseen. Piilotetussa muodossa olevia elementtejä ei näytetä osana tätä menetelmää.

Syntaksi

$(selector).fadeToggle(duration, easing, callback)

esimerkki

$("label").click(func()(
$("#box").fadeToggle();
));

4) fadeTo ()

Tätä menetelmää käytetään muuttamaan kaikkien opasiteettien opasiteetti

eli kappaleisiin liittyvät elementit vähitellen. Määritetty opasiteetti tässä yhteydessä viittaa muuttuvaan opasiteettiin.

Syntaksi

$(selector).fadeTo(duration, opacity, easing, callback)

esimerkki

$("label").click(func()(
$("p").fadeTo(100, 0.9);
));

5) clearQueue ()

Tämä menetelmä on sama kuin nimessä ehdotettu. Tätä käytetään jonon tyhjentämiseen ja poistetaan jonosta kaikki kohteet, joita ei ole ajettu. Toiminto suorittaa suorituksensa loppuun, kun se on alkanut suorittaa. Tämä liittyy kahteen menetelmään, nimittäin. jono () ja jälkikäytä ().

Syntaksi

$(selector).clearQueue(NameOfQueue)

esimerkki

$("label").click(func()(
$("box").clearQueue();
));

6) viimeistely ()

Tätä jQuery-menetelmää käytetään parhaillaan käynnissä olevan animaattorin lopettamiseen tai viimeistelyyn, koska sitä käytetään pysäyttämään kaikki parhaillaan käynnissä olevat animaatiot, ja sitä käytetään poistamaan kaikki jonossa olevat animaatiot. Sitä käytetään myös suorittamaan kaikki animaatiot valitulle elementille, jotka vaihtelevat. Tämä menetelmä on samanlainen kuin menetelmät, kuten .stop, jolla on molemmat todelliset parametrit. Suurin ero tämän menetelmän ja viimeistelyn välillä on se, että viimeistelymenetelmää käytetään pysäyttämään ja keskeyttämään kaikkien jonossa olevien animaatioiden CSS-elementtiominaisuustyypit.

Syntaksi

$(selector).finish(NameOfQueue)

esimerkki

$("#complete").click(func()(
$("div1").finish();
));

7) purkaa ()

Tätä menetelmää käytetään seuraavan funktion poistamiseen jonosta, ja sitä käytetään sitten toiminnon suorittamiseen. Jono on yksi tai useampi toiminto, jotka ovat valmisteilla odottamassa ajoa. Tätä jälkikäsittelymenetelmää käytetään jonojärjestelmän rinnalla. Yhdessä elementissä voi olla useita jonoja. Fx-jono on yleisin, joka on myös oletusjono.

Syntaksi

$(selector).dequeue(NameOfQueue)

esimerkki

$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));

8) slideDown ()

Tämä on toinen hyödyllinen menetelmä jQueryssä, jota käytetään liu'uttamaan alas tai esittämään valitut elementtiluettelot. Tärkeää on huomata, että se toimii myös piilotetussa muodossa olevilla elementeillä ja CSS: n tapauksessa näyttötyyppi esitetään tyhjänä, mutta näkyvyyttä ei tarvitse piilottaa.

Syntaksi

$(selector). slideDown (duration, easing, callback)

esimerkki

$("label").queue(func()(
$("p").slideDown();
));

9) slideUp ()

SlideUp () -menetelmää käytetään kaikkien piilottamiseen

valitut elementit. Piilotetussa muodossa olevia elementtejä ei näytetä ollenkaan. Siksi tämä ei vaikuta sivun asetteluun.

Syntaksi

$(selector).slideUp(duration, easing, callback)

esimerkki

$("label").queue(func()(
$("p").slideUp();
));

10) slideDown ()

Toisin kuin slideUp () -menetelmä, tätä menetelmää käytetään kaikkien piilotettujen näyttämiseen

elementtejä. Tämä liukuva () -menetelmä toimii kaikilla elementeillä, jotka liittyvät myös piilotettuihin menetelmiin jQuery-menetelmien tapauksessa, ja nimi näkyy myös CSS: ssä, mutta näkyvyyttä ei ole piilotettu.

Syntaksi

$(selector).slideDown(duration, easing, callback)

esimerkki

$("label").queue(func()(
$("p").slideDown();
));

11) Vaihda ()

Tätä menetelmää käytetään vaihdettamaan näyttelyn ja piilottamisen välillä

perustuvat elementit. Tätä menetelmää käytetään tarkistamaan elementtien näkyvyys. Show () -menetelmää käytetään suorittamaan, vaikka elementti olisi piilotettu. Piilota () suoritetaan, vaikka elementti olisi näkyvissä. Sekä näytä että piilota menetelmät yhdistelmänä luo vaihtamistehosteen, ja siksi menetelmä vaihta ().

Syntaksi

$(selector).toggle(duration, easing, callback)

esimerkki

$("label").queue(func()(
$("p").toggle();
));

12) slideToggle ()

Tätä menetelmää käytetään kaikkien kappaleeseen perustuvien elementtien siirtämiseen slideUp () - ja slideDown () -toimintojen välillä. Tätä menetelmää käytetään valittujen elementtien tarkistamiseen näkyvyyden vuoksi. SlideDown () on toiminto, joka voidaan nähdä käynnissä, kun elementti on piilotettu. Sitä vastoin slideUp () -elementti tulisi suorittaa, jos elementti on näkyvissä.

Syntaksi

$(selector).slideToggle(duration, easing, callback)

esimerkki

$("label").queue(func()(
$("p").slideToggle();
));

jQuery antaa meille mahdollisuuden lisätä tehosteita verkkosivulle tarjoamalla useita määriä toimintoja, jotka voidaan asettaa eri valitsimille. Se on sinulle, miten haluat saada verkkosivustosi näyttämään entistä tehokkaammilta. Toivottavasti olet pitänyt artikkelistamme. Pysy ajan tasalla blogiimme saadaksesi lisää tällaisia ​​artikkeleita.

Suositellut artikkelit

Tämä on opas jQuery-efektiin. Tässä olemme keskustelleet jQuery Effects Methods -tyyppien tyypeistä syntaksin ja esimerkin avulla. Voit myös tarkastella seuraavaa artikkelia saadaksesi lisätietoja -

1. JQueryn käyttö
2. jQuery-vaihtoehdot
3. MySQL-kyselykomennot
4. Mikä on menettely SQL: ssä?
5. jQuery querySelector