I denne artikel vil vi se, hvordan man bruger forskellige JQuery-metoder til at generere animationer.
hide() Og show()Hide()-metoden sætter simpelthen stilen inline display: none for udvalgte varer. Omvendt gendanner metoden show() visningsegenskaberne.
Lad os se et eksempel:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>I det første tilfælde skjules afsnittet, når du klikker på knappen (hide-btn), i det andet tilfælde vises afsnittet, når du klikker på knappen (show-btn).
Du kan også angive varighedsparameteren for at animere showet og skjule effekten i en periode.
Varigheder kan angives ved hjælp af en af pre-strengenedefinite 'slow' o 'fast', eller i et antal millisekunder, for større nøjagtighed; højere værdier indikerer langsommere animationer.
<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>Strengen prædefiIT- og Telestyrelsen 'fast' angiver en varighed på 200 millisekunder, mens strengen 'slow' angiver varigheden af 600 millisekunder.
Vi kan angive en funktion af callback skal udføres efter metodeafslutning show() eller dell ' 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 metoden toggle() vis eller skjul elementer på en sådan måde, at hvis elementet først vises, vil det blive skjult; omvendt, hvis den er skjult, vil den blive vist (skifter praktisk talt dens synlighed).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>På samme måde kan du angive parameteren duration for metoden toggle(), på en sådan måde at animere overgangen mellem synlige og skjulte, lignende metoder 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>På samme måde kan du også angive en funktion af callback for metoden 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()Du kan bruge jQuery metoder fadeIn()e fadeOut() at vise eller skjule HTML-elementer, gradvist øge eller mindske deres uigennemsigtighed og skabe en falmende effekt.
<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>Som andre jQuery-effektmetoder kan du valgfrit angive varighed eller hastighedsparameter for metoder fadeIn()e fadeOut(), for at kontrollere varigheden af fade. Varigheder kan angives ved hjælp af en af pre-strengenedefinite 'slow' o 'fast', eller i et antal millisekunder; højere værdier indikerer langsommere animationer.
<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>virkningen af metoderne fadeIn() / fadeOut() è lignelse en show() / hide(), men i modsætning til metoderne show() / hide(), førstnævnte animerer kun målelementernes opacitet og animerer ikke deres størrelse.
Du kan også angive en funktion af callback at køre, efter at metoderne er fuldført 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 metoden fadeToggle() viser eller skjuler udvalgte elementer ved at animere deres opacitet, så hvis elementet først vises, vil det blive udtonet; hvis det var skjult, vil det fade ud (dvs. skifte fade-effekten).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Du kan også angive levetidsparameteren for metoden fadeToggle() hvad angår metoderne fadeIn() / fadeOut(), for at kontrollere varigheden eller hastigheden af fade-animationen.
<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()-metoden har også mulighed for at specificere en funktion 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 metoden fadeTo() det ligner metoden fadeIn(), men i modsætning til metoden fadeIn(), metoden fadeTo() lader dig blande elementer ned til et vist niveau af opacitet.
$(selector).fadeTo(speed, opacity, callback);Den nødvendige parameter opacity angiver den endelige opacitet af målelementerne, som kan være et tal mellem 0 og 1. Parameteren duration o speed det er også påkrævet for denne metode, som angiver varigheden af animationsfade.
<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 metoden slideUp() e slideDown() bruges til at skjule eller vise HTML-elementer ved gradvist at formindske eller øge deres højde (dvs. rulle dem op eller ned).
<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>Som andre jQuery-effektmetoder kan du valgfrit angive varighed eller hastighedsparameter for metoderne slideUp() e slideDown() for at kontrollere varigheden af diasanimationen. Varigheder kan angives ved hjælp af en af pre-strengenedefinite 'slow' o 'fast', eller i et antal millisekunder; højere værdier indikerer langsommere animationer.
<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>Du kan også angive en tilbagekaldsfunktion, der skal udføres efter metodeafslutning 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 metoden slideToggle() vis eller skjul udvalgte elementer ved at animere deres højde, så hvis elementet først vises, vil det blive rullet op; hvis den er skjult, vil den blive rullet ned, dvs. skifter mellem metoder slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>På samme måde kan du angive levetidsparameteren for metoden slideToggle() Kom 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>På samme måde kan du også angive en tilbagekaldsfunktion for metoden 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 metoden animate() det bruges til at lave brugerdefinerede animationer. Metoden animate() bruges til at animere numeriske CSS-egenskaber, som f.eks width, height, margin, padding, opacity, top, left etc. men ikke-numeriske egenskaber som color o background-color de kan ikke animeres ved hjælp af grundlæggende jQuery-funktionalitet.
Metodens grundlæggende syntaks animate() det er følgende:
$(selector).animate({ properties }, duration, callback);Metode parametre animate() har følgende betydninger:
'slow' o 'fast', eller i et antal millisekunder; højere værdier indikerer langsommere animationer.Nedenfor er et simpelt eksempel på metoden animate() som animerer et billede fra dets oprindelige position til højre med 300 pixels ved knapklik.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Du kan også animere flere egenskaber for et element sammen på én gang ved hjælp af metoden animate(). Alle ejendomme blev animeret på samme tid uden forsinkelse.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Du kan også animere flere egenskaber af et element én efter én individuelt i en kø ved hjælp af jQuerys sammenkædningsfunktion.
Følgende eksempel viser en jQuery-animation i kø eller lænket, hvor hver animation starter, når den forrige animation på elementet er fuldført. Vi vil se sammenkædningsfunktionen i en fremtidig artikel.
<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>Det er også muligt defiafslutte relative værdier for animerede egenskaber. Hvis en værdi er angivet med et præfiks += o -=, beregnes målværdien ved at addere eller trække det angivne tal fra ejendommens aktuelle værdi.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Ud over numeriske værdier kan hver egenskab acceptere strenge 'show', 'hide' e 'toggle'. Det vil være meget nyttigt i en situation, hvor du blot ønsker at animere ejendommen fra dens nuværende værdi til dens oprindelige værdi og omvendt.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()jQuery metoden stop() bruges til at stoppe aktuelt at køre jQuery-animationer eller effekter på udvalgte elementer før færdiggørelse.
Metodens grundlæggende syntaks stop() jQuery kan gives med:
$(selector).stop(stopAll, goToEnd);Parametrene i ovenstående syntaks har følgende betydninger:
false, betyder det, at kun den aktuelle animation vil blive stoppet, resten af animationerne i køen vil blive udført senere.false.Her er et simpelt eksempel, der demonstrerer metoden stop() i real action, hvor du kan starte og stoppe animationen ved at klikke på knappen.
<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>Her er et andet eksempel på denne metode, hvor hvis du klikker på knappen igenSlide Toggle” efter start af animationen, men før den er fuldført, vil animationen straks starte i den modsatte retning fra det gemte startpunkt.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Mens du opretter den animerede svæveeffekt, er et af de mest almindelige problemer, du kan støde på, flere animationer i kø, når du hurtigt placerer og fjerner musemarkøren. Hvorfor i denne situation, mouseenter gli mouseleave begivenheder affyres hurtigt, før animationen er færdig. For at undgå dette problem og skabe en flot og jævn svæveeffekt kan du tilføje stop(true, true)til metodekæden, sådan:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript-sætninger udføres linje for linje. Men da jQuery-effekten tager noget tid at afslutte, kan den næste linjes kode køre, mens den forrige effekt stadig kører. For at forhindre dette i at ske, giver jQuery en tilbagekaldsfunktion for hver effektmetode.
En tilbagekaldsfunktion er en funktion, der kører, når effekten er fuldført. Callback-funktionen videregives som et argument til effektens metoder, og de vises normalt som det sidste metodeargument. For eksempel den grundlæggende syntaks for jQuery-effektmetoden slideToggle() med en tilbagekaldsfunktion, der kan specificeres som følger:
$(selector).slideToggle(duration, callback);Overvej følgende eksempel, hvor vi har placeret udsagnene slideToggle()e alert()den ene ved siden af den anden. Hvis du prøver denne kode, vises advarslen umiddelbart efter, at du har klikket på til/fra-knappen uden at vente på, at slide-skift-effekten er fuldført.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Og her er den modificerede version af det forrige eksempel, hvor vi indsatte erklæringen alert() inde i en tilbagekaldsfunktion til metoden slideToggle(). Hvis du prøver denne kode, vises advarselsmeddelelsen, når slide-skift-effekten er fuldført.
<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>Ligeledes kan du defifinish callback-funktioner for de andre jQuery-effektmetoder, som f.eks show(), hide(), fadeIn(), fadeOut(), animate()osv.
<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>Hvis du prøver eksempelkoden ovenfor, får du den samme advarselsmeddelelse to gange én gang pr <h1> e <p>, efter at have klikket på aktiveringsknappen.
BlogInnovazione.it
Coveware by Veeam vil fortsætte med at levere responstjenester til cyberafpresning. Coveware vil tilbyde kriminaltekniske og afhjælpende funktioner...
Forudsigende vedligeholdelse revolutionerer olie- og gassektoren med en innovativ og proaktiv tilgang til anlægsstyring...
Det britiske CMA har udsendt en advarsel om Big Techs adfærd på markedet for kunstig intelligens. Der…
Dekretet om "grønne huse", der er formuleret af Den Europæiske Union for at øge bygningers energieffektivitet, har afsluttet sin lovgivningsproces med...