Selles artiklis näeme, kuidas kasutada erinevaid JQuery meetodeid animatsioonide genereerimiseks.
hide() Ja show()Meetod hide() määrab stiili lihtsalt tekstisiseselt display: none valitud üksuste jaoks. Seevastu meetod show() taastab kuva omadused.
Vaatame näidet:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Esimesel juhul on lõik peidetud, kui klõpsate nupul (hide-btn), teisel juhul kuvatakse lõik, kui klõpsate nupul (show-btn).
Saate määrata ka kestuse parameetri, et animeerida ja peita efekt teatud aja jooksul.
Kestusi saab määrata ühe eelstringi abildefinite 'slow' o 'fast', või mõne millisekundi jooksul suurema täpsuse saavutamiseks; kõrgemad väärtused näitavad aeglasemat animatsiooni.
<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>String predefiNita 'fast' näitab kestust 200 millisekundit, samas kui string 'slow' näitab kestust 600 millisekundit.
Saame määrata funktsiooni callback täidetakse pärast meetodi valmimist show() või 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>jQuery meetod toggle() näidata või peita üksusi nii, et kui üksust algselt kuvatakse, siis see peidetakse; vastupidi, kui see on peidetud, siis see kuvatakse (praktiliselt lülitab selle nähtavuse sisse).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Samamoodi saate määrata parameetri duration meetodi jaoks toggle(), et animeerida üleminekut nähtavate ja varjatud meetodite vahel 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>Samamoodi saate määrata ka funktsiooni callback meetodi jaoks 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()Võite kasutada jQuery meetodeid fadeIn()e fadeOut() HTML-i elementide kuvamiseks või peitmiseks, suurendades või vähendades järk-järgult nende läbipaistmatust ja luues tuhmumisefekti.
<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>Sarnaselt teistele jQuery efektimeetoditele saate valikuliselt määrata meetodite kestuse või kiiruse parameetri fadeIn()e fadeOut(), et kontrollida tuhmumise kestust. Kestusi saab määrata ühe eelstringi abildefinite 'slow' o 'fast', või mõne millisekundi jooksul; kõrgemad väärtused näitavad aeglasemat animatsiooni.
<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>meetodite mõju fadeIn() / fadeOut() See on sarnane show() / hide(), kuid erinevalt meetoditest show() / hide(), esimesed animeerivad ainult sihtelementide läbipaistmatust ja ei animeeri nende suurust.
Samuti saate määrata funktsiooni callback käivitada pärast meetodite lõpetamist 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()jQuery meetod fadeToggle() kuvab või peidab valitud elemendid, animeerides nende läbipaistmatust nii, et kui elementi algselt kuvatakse, siis see tuhmub; kui see oli peidetud, tuhmub see välja (st lülitab tuhmumisefekti sisse).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Samuti saate määrata meetodi eluea parameetri fadeToggle() meetodite osas fadeIn() / fadeOut(), et juhtida tuhmumisanimatsiooni kestust või kiirust.
<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>FadeToggle() meetodil on ka funktsiooni määramise võimalus 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()jQuery meetod fadeTo() see on meetodiga sarnane fadeIn(), kuid erinevalt meetodist fadeIn(), meetod fadeTo() võimaldab elemente segada kuni teatud läbipaistmatuse tasemeni.
$(selector).fadeTo(speed, opacity, callback);Nõutav parameeter opacity määrab sihtelementide lõpliku läbipaistmatuse, mis võib olla arv vahemikus 0 kuni 1. Parameeter duration o speed see on vajalik ka selle meetodi jaoks, mis määrab animatsiooni tuhmumise kestuse.
<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()jQuery meetod slideUp() e slideDown() neid kasutatakse HTML-i elementide peitmiseks või kuvamiseks nende kõrgust järk-järgult vähendades või suurendades (st üles või alla kerides).
<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>Sarnaselt teistele jQuery efektimeetoditele saate valikuliselt määrata meetodite kestuse või kiiruse parameetri slideUp() e slideDown() slaidi animatsiooni kestuse reguleerimiseks. Kestusi saab määrata ühe eelstringi abildefinite 'slow' o 'fast', või mõne millisekundi jooksul; kõrgemad väärtused näitavad aeglasemat animatsiooni.
<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>Samuti saate määrata tagasihelistamisfunktsiooni, mis käivitatakse pärast meetodi lõpetamist 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()jQuery meetod slideToggle() näidata või peita valitud elemente, animeerides nende kõrgust, nii et kui elementi algselt kuvatakse, keritakse see üles; kui see on peidetud, keritakse see alla, st lülitub meetodite vahel slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Samamoodi saate määrata meetodi eluea parameetri slideToggle() Tulema 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>Samamoodi saate meetodi jaoks määrata ka tagasihelistamise funktsiooni 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()jQuery meetod animate() seda kasutatakse kohandatud animatsioonide loomiseks. Meetod animate() kasutatakse CSS-i numbriliste atribuutide, nt width, height, margin, padding, opacity, top, left jne. kuid mittenumbrilised omadused nagu color o background-color neid ei saa animeerida, kasutades jQuery põhifunktsioone.
Meetodi põhisüntaks animate() see on järgmine:
$(selector).animate({ properties }, duration, callback);Meetodi parameetrid animate() on järgmised tähendused:
'slow' o 'fast', või mõne millisekundi jooksul; kõrgemad väärtused näitavad aeglasemat animatsiooni.Allpool on meetodi lihtne näide animate() mis animeerib pildi algsest positsioonist paremale 300 piksli võrra nupu klõpsamisel.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Selle meetodi abil saate animeerida ka elemendi mitut atribuuti korraga animate(). Kõik omadused animeeriti samal ajal ilma viivituseta.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Saate animeerida ka elemendi mitut atribuuti ükshaaval järjekorras, kasutades jQuery konkateneerimisfunktsiooni.
Järgmine näide näitab järjekorras või aheldatud jQuery animatsiooni, kus iga animatsioon algab siis, kui elemendi eelmine animatsioon on lõppenud. Konkatenatsioonifunktsiooni näeme tulevases artiklis.
<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>See on ka võimalik definish suhtelised väärtused animeeritud atribuutidele. Kui väärtus on määratud eesliitega += o -=, arvutatakse sihtväärtus kinnisvara hetkeväärtusest määratud arvu liitmise või lahutamise teel.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Lisaks arvväärtustele saab iga atribuut aktsepteerida stringe 'show', 'hide' e 'toggle'. See on väga kasulik olukorras, kus soovite lihtsalt kinnisvara animeerida selle hetkeväärtusest algväärtuseni ja vastupidi.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()jQuery meetod stop() kasutatakse jQuery animatsioonide või efektide käivitamise peatamiseks valitud üksustel enne lõpetamist.
Meetodi põhisüntaks stop() jQuery saab anda koos:
$(selector).stop(stopAll, goToEnd);Ülaltoodud süntaksi parameetritel on järgmised tähendused:
false, see tähendab, et ainult praegune animatsioon peatatakse, ülejäänud järjekorras olevad animatsioonid käivitatakse hiljem.false.Siin on lihtne näide meetodi demonstreerimiseks stop() reaalses tegevuses, kus saate nuppu klõpsates animatsiooni käivitada ja peatada.
<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>Siin on veel üks näide selle meetodi kohta, kui klõpsate nuppu uuestiSlide Toggle” pärast animatsiooni käivitamist, kuid enne selle lõppemist, algab animatsioon kohe salvestatud alguspunktist vastupidises suunas.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Animeeritud hõljutusefekti loomisel on üks levinumaid probleeme, mis võivad ilmneda mitme animatsiooni järjekorda panemises, kui asetate ja eemaldate kiiresti hiirekursori. Miks sellises olukorras mouseenter gli mouseleave sündmused käivitatakse kiiresti enne animatsiooni lõppu. Selle probleemi vältimiseks ja kena ja sujuva hõljumise efekti loomiseks võite lisada stop(true, true)meetodite ahelasse, näiteks:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScripti avaldused täidetakse ridade kaupa. Kuna aga jQuery efekti lõpuleviimiseks kulub veidi aega, võib järgmise rea kood käitada ka siis, kui eelmine efekt töötab. Selle vältimiseks pakub jQuery iga efektimeetodi jaoks tagasihelistamisfunktsiooni.
Tagasihelistamise funktsioon on funktsioon, mis käivitatakse pärast efekti lõppemist. Tagasihelistamise funktsioon edastatakse argumendina efekti meetoditele ja need kuvatakse tavaliselt viimase meetodi argumendina. Näiteks jQuery efektimeetodi põhisüntaks slideToggle() tagasihelistamisfunktsiooniga, mida saab määrata järgmiselt:
$(selector).slideToggle(duration, callback);Vaatleme järgmist näidet, kuhu oleme väited paigutanud slideToggle()e alert()üks teise kõrval. Kui proovite seda koodi, kuvatakse hoiatus kohe pärast lülitusnupul klõpsamist, ootamata slaidi lülitusefekti lõpuleviimist.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Ja siin on eelmise näite muudetud versioon, kuhu me avalduse sisestasime alert() meetodi tagasihelistamise funktsiooni sees slideToggle(). Kui proovite seda koodi, kuvatakse hoiatusteade, kui slaidi ümberlülitusefekt on lõppenud.
<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>Samamoodi saate defilõpetage tagasihelistamisfunktsioonid teiste jQuery efektimeetodite jaoks, näiteks show(), hide(), fadeIn(), fadeOut(), animate(), jne.
<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>Kui proovite ülaltoodud näidiskoodi, saate sama hoiatusteate kaks korda üksuse kohta <h1> e <p>, pärast aktiveerimisnupul klõpsamist.
BlogInnovazione.it
Ühendkuningriigi CMA on väljastanud hoiatuse Big Techi käitumise kohta tehisintellekti turul. Seal…
Euroopa Liidu poolt hoonete energiatõhususe suurendamiseks koostatud roheliste majade dekreet on lõpetanud oma seadusandliku protsessi…
Esitati Casaleggio Associati aastaaruanne e-kaubanduse kohta Itaalias. Raport pealkirjaga "AI-kaubandus: tehisintellektiga e-kaubanduse piirid".…
Pideva tehnoloogilise uuenduse ning keskkonnale ja inimeste heaolule pühendumise tulemus. Bandalux esitleb telki Airpure®…