V tem članku bomo videli, kako uporabiti različne metode JQuery za generiranje animacij.
hide() In show()Metoda hide() preprosto nastavi slog v vrstici display: none za izbrane predmete. Nasprotno pa metoda show() obnovi lastnosti zaslona.
Poglejmo primer:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>V prvem primeru je odstavek skrit, ko kliknete gumb (hide-btn), v drugem primeru se odstavek prikaže, ko kliknete gumb (show-btn).
Določite lahko tudi parameter trajanja, da animirate učinek prikaza in skrivanja za določen čas.
Trajanja je mogoče določiti z enim od prednizovdefiNite 'slow' o 'fast', ali v številu milisekund, za večjo natančnost; višje vrednosti kažejo na počasnejše animacije.
<script>
$(document).ready(function(){
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function(){
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(50);
$("p.very-slow").hide(2000);
});
// Show hidden paragraphs with different speeds
$(".show-btn").click(function(){
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(50);
$("p.very-slow").show(2000);
});
});
</script>Niz preddefinita 'fast' označuje trajanje 200 milisekund, medtem ko niz 'slow' označuje trajanje 600 milisekund.
Določimo lahko funkcijo callback ki se izvede po zaključku metode show() ali od hide()
<script>
$(document).ready(function(){
// Display alert message after hiding paragraphs
$(".hide-btn").click(function(){
$("p").hide("slow", function(){
// Code to be executed
alert("The hide effect is completed.");
});
});
// Display alert message after showing paragraphs
$(".show-btn").click(function(){
$("p").show("slow", function(){
// Code to be executed
alert("The show effect is completed.");
});
});
});
</script>Metoda jQuery toggle() pokaži ali skrij predmete na tak način, da če je element prvotno prikazan, bo skrit; nasprotno, če je skrito, bo prikazano (praktično preklopi njegovo vidnost).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Podobno lahko določite parameter duration za metodo toggle(), na način, da animira prehod med vidnim in skritim, kot metode show() e hide()
<script>
$(document).ready(function(){
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>Podobno lahko določite tudi funkcijo callback za metodo toggle().
<script>
$(document).ready(function(){
// Display alert message after toggling paragraphs
$(".toggle-btn").click(function(){
$("p").toggle(1000, function(){
// Code to be executed
alert("The toggle effect is completed.");
});
});
});
</script>fadeIn() e fadeOut()Uporabite lahko metode jQuery fadeIn()e fadeOut() za prikaz ali skrivanje elementov HTML, s postopnim povečevanjem ali zmanjševanjem njihove motnosti in ustvarjanjem učinka bledenja.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>Tako kot pri drugih metodah učinkov jQuery lahko tudi za metode po želji določite parameter trajanja ali hitrosti fadeIn()e fadeOut(), da nadzirate trajanje bledenja. Trajanja je mogoče določiti z enim od prednizovdefiNite 'slow' o 'fast', ali v številu milisekund; višje vrednosti kažejo na počasnejše animacije.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>učinek metod fadeIn() / fadeOut() Podobno je show() / hide(), vendar za razliko od metod show() / hide(), prvi samo animirajo motnost ciljnih elementov in ne animirajo njihove velikosti.
Določite lahko tudi funkcijo callback za zagon po zaključku metod fadeIn() / fadeOut().
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>fadeToggle()Metoda jQuery fadeToggle() prikaže ali skrije izbrane elemente z animiranjem njihove motnosti, tako da, če je element prvotno prikazan, bo zbledel; če je bil skrit, bo zbledel (tj. preklopil učinek zbledenja).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Določite lahko tudi parameter življenjske dobe za metodo fadeToggle() kar se tiče metod fadeIn() / fadeOut(), za nadzor trajanja ali hitrosti bledeče animacije.
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>Metoda fadeToggle() ima tudi možnost podajanja funkcije callback.
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>fadeTo()Metoda jQuery fadeTo() je podobna metodi fadeIn(), vendar za razliko od metode fadeIn(), metoda fadeTo() vam omogoča mešanje elementov do določene stopnje motnosti.
$(selector).fadeTo(speed, opacity, callback);Zahtevani parameter opacity določa končno motnost ciljnih elementov, ki je lahko število med 0 in 1. Parameter duration o speed zahteva se tudi za to metodo, ki določa trajanje bledenja animacije.
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>slideUp() e slideDown()Metoda jQuery slideUp() e slideDown() uporabljajo se za skrivanje ali prikazovanje elementov HTML s postopnim zmanjševanjem ali povečevanjem njihove višine (tj. s pomikanjem navzgor ali navzdol).
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});
// Slide down hidden paragraphs
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>Tako kot pri drugih metodah učinkov jQuery lahko tudi za metode po želji določite parameter trajanja ali hitrosti slideUp() e slideDown() za nadzor trajanja animacije diapozitiva. Trajanja je mogoče določiti z enim od prednizovdefiNite 'slow' o 'fast', ali v številu milisekund; višje vrednosti kažejo na počasnejše animacije.
<script>
$(document).ready(function(){
// Sliding up displayed paragraphs with different speeds
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// Sliding down hidden paragraphs with different speeds
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>Določite lahko tudi funkcijo povratnega klica, ki naj se izvede po zaključku metode slideUp() o slideDown().
<script>
$(document).ready(function(){
// Display alert message after sliding up paragraphs
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// Code to be executed
alert("The slide-up effect is completed.");
});
});
// Display alert message after sliding down paragraphs
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// Code to be executed
alert("The slide-down effect is completed.");
});
});
});
</script>slideToggle()Metoda jQuery slideToggle() pokažite ali skrijete izbrane elemente z animiranjem njihove višine, tako da se element, če je prvotno prikazan, pomakne navzgor; če je skrito, se bo pomaknilo navzdol, tj. preklaplja med metodami slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Podobno lahko določite parameter življenjske dobe za metodo slideToggle() kako slideUp() e slideDown().
<script>
$(document).ready(function(){
// Slide Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>Podobno lahko določite tudi funkcijo povratnega klica za metodo slideToggle().
<script>
$(document).ready(function(){
// Display alert message after slide toggling paragraphs
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// Code to be executed
alert("The slide-toggle effect is completed.");
});
});
});
</script>animate()Metoda jQuery animate() uporablja se za ustvarjanje animacij po meri. Metoda animate() se uporablja za animiranje numeričnih lastnosti CSS, kot je npr width, height, margin, padding, opacity, top, left itd. ampak neštevilske lastnosti, kot je color o background-color ni jih mogoče animirati z uporabo osnovne funkcije jQuery.
Osnovna sintaksa metode animate() to je naslednje:
$(selector).animate({ properties }, duration, callback);Parametri metode animate() imajo naslednje pomene:
'slow' o 'fast', ali v številu milisekund; višje vrednosti kažejo na počasnejše animacije.Spodaj je preprost primer metode animate() ki ob kliku gumba animira sliko iz prvotnega položaja na desno za 300 slikovnih pik.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Z metodo lahko hkrati animirate več lastnosti elementa animate(). Vse lastnosti so bile animirane hkrati in brez zamude.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Prav tako lahko animirate več lastnosti elementa eno za drugo posamično v čakalni vrsti z uporabo funkcije združevanja jQuery.
Naslednji primer prikazuje animacijo jQuery v čakalni vrsti ali verigi, kjer se bo vsaka animacija začela, ko bo prejšnja animacija na elementu končana. Funkcijo veriženja bomo videli v prihodnjem članku.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>Možno je tudi definish relativne vrednosti za animirane lastnosti. Če je vrednost podana s predpono += o -=, se ciljna vrednost izračuna tako, da se določeno število prišteje ali odšteje od trenutne vrednosti lastnosti.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Poleg številskih vrednosti lahko vsaka lastnost sprejme nize 'show', 'hide' e 'toggle'. Zelo uporabno bo v primeru, ko želite samo animirati lastnost iz trenutne vrednosti v začetno vrednost in obratno.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Metoda jQuery stop() se uporablja za zaustavitev trenutno izvajanih animacij jQuery ali učinkov na izbranih elementih pred zaključkom.
Osnovna sintaksa metode stop() jQuery lahko podate z:
$(selector).stop(stopAll, goToEnd);Parametri v zgornji sintaksi imajo naslednje pomene:
false, to pomeni, da bo ustavljena le trenutna animacija, ostale animacije v čakalni vrsti pa bodo izvedene pozneje.false.Tukaj je preprost primer, ki prikazuje metodo stop() v resničnem dogajanju, kjer lahko začnete in ustavite animacijo s klikom na gumb.
<script>
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=150px"}, 2000);
});
// Stop running animation
$(".stop-btn").click(function(){
$("img").stop();
});
// Start animation in the opposite direction
$(".back-btn").click(function(){
$("img").animate({left: "-=150px"}, 2000);
});
// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>Tukaj je še en primer te metode, če znova kliknete gumbSlide Toggle” po začetku animacije, vendar preden se konča, se bo animacija takoj začela v nasprotni smeri od shranjene začetne točke.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Pri ustvarjanju animiranega učinka lebdenja je ena najpogostejših težav, na katere lahko naletite, več animacij v čakalni vrsti, ko hitro postavite in odstranite kazalec miške. Zakaj v tej situaciji, mouseenter gli mouseleave dogodki se sprožijo hitro, preden se animacija zaključi. Da bi se izognili tej težavi in ustvarili lep in gladek učinek lebdenja, lahko dodate stop(true, true)v verigo metod, takole:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Stavki JavaScript se izvajajo vrstico za vrstico. Ker pa učinek jQuery traja nekaj časa, da se dokonča, se lahko koda naslednje vrstice izvaja, medtem ko se prejšnji učinek še izvaja. Da se to ne bi zgodilo, jQuery nudi funkcijo povratnega klica za vsako metodo učinka.
Funkcija povratnega klica je funkcija, ki se zažene, ko je učinek končan. Funkcija povratnega klica se posreduje kot argument metodam učinka in se običajno prikažejo kot zadnji argument metode. Na primer osnovna sintaksa metode učinka jQuery slideToggle() s funkcijo povratnega klica, ki jo lahko podate na naslednji način:
$(selector).slideToggle(duration, callback);Razmislite o naslednjem primeru, kamor smo postavili izjave slideToggle()e alert()eden poleg drugega. Če poskusite to kodo, se bo opozorilo prikazalo takoj po kliku preklopnega gumba, ne da bi čakali, da se učinek preklopa drsnika zaključi.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>In tukaj je spremenjena različica prejšnjega primera, kjer smo vstavili izjavo alert() znotraj funkcije povratnega klica za metodo slideToggle(). Če poskusite to kodo, se bo opozorilno sporočilo prikazalo, ko bo učinek preklopa drsnika končan.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Prav tako lahko defidokončajte povratne funkcije za druge metode učinkov jQuery, kot je npr show(), hide(), fadeIn(), fadeOut(), animate(), itd.
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Če preizkusite zgornjo vzorčno kodo, boste dvakrat prejeli isto opozorilno sporočilo za vsak element <h1> e <p>, po kliku na gumb za aktiviranje.
BlogInnovazione.it
Prejšnji ponedeljek je Financial Times objavil dogovor z OpenAI. FT licencira svoje vrhunsko novinarstvo ...
Milijoni ljudi plačujejo storitve pretakanja in plačujejo mesečne naročnine. Splošno mnenje je, da si…
Coveware by Veeam bo še naprej zagotavljal storitve odzivanja na incidente kibernetskega izsiljevanja. Coveware bo nudil forenziko in zmogljivosti sanacije ...
Prediktivno vzdrževanje revolucionira sektor nafte in plina z inovativnim in proaktivnim pristopom k upravljanju obratov.…