I denne artikkelen vil vi se hvordan du bruker forskjellige JQuery-metoder for å generere animasjoner.
hide() Og show()Hide()-metoden setter ganske enkelt stilen inline display: none for utvalgte varer. Omvendt gjenoppretter show()-metoden visningsegenskapene.
La oss 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 tilfellet skjules avsnittet når du klikker på knappen (hide-btn), i det andre tilfellet vises avsnittet når du klikker på knappen (show-btn).
Du kan også spesifisere varighetsparameteren for å animere showet og skjule effekten for en periode.
Varighetene kan spesifiseres ved hjelp av en av pre-strengenedefinite 'slow' o 'fast', eller i et antall millisekunder, for større nøyaktighet; høyere verdier indikerer tregere animasjoner.
<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 predefiNita 'fast' indikerer en varighet på 200 millisekunder, mens strengen 'slow' angir varigheten på 600 millisekunder.
Vi kan spesifisere en funksjon av callback skal utføres etter fullføring av metoden show() eller av 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 slik måte at hvis elementet først vises, vil det bli skjult; omvendt, hvis den er skjult, vil den vises (bytter praktisk talt synligheten).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>På samme måte kan du spesifisere parameteren duration for metoden toggle(), på en slik måte at den animerer overgangen mellom synlig og skjult, som 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åte kan du også angi en funksjon av 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 bruke jQuery-metoder fadeIn()e fadeOut() for å vise eller skjule HTML-elementer, gradvis øke eller redusere deres opasitet og skape en falmingseffekt.
<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 valgfritt spesifisere varighet eller hastighetsparameter for metoder fadeIn()e fadeOut(), for å kontrollere varigheten av uttoningen. Varighetene kan spesifiseres ved hjelp av en av pre-strengenedefinite 'slow' o 'fast', eller i et antall millisekunder; høyere verdier indikerer tregere animasjoner.
<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>effekten av metodene fadeIn() / fadeOut() è likning a show() / hide(), men i motsetning til metodene show() / hide(), førstnevnte animerer bare opasiteten til målelementene og animerer ikke størrelsen deres.
Du kan også spesifisere en funksjon av callback å kjøre etter at metodene er fullfø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 utvalgte elementer ved å animere deres opasitet slik at hvis elementet først vises, vil det tones ut; hvis den ble skjult, vil den tone ut (dvs. bytte uttoningseffekt).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Du kan også spesifisere levetidsparameteren for metoden fadeToggle() når det gjelder metodene fadeIn() / fadeOut(), for å kontrollere varigheten eller hastigheten på fade-animasjonen.
<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å muligheten til å spesifisere en funksjon 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 på metoden fadeIn(), men i motsetning til metoden fadeIn(), metoden fadeTo() lar deg blande elementer ned til et visst nivå av opasitet.
$(selector).fadeTo(speed, opacity, callback);Den nødvendige parameteren opacity spesifiserer den endelige opasiteten til målelementene som kan være et tall mellom 0 og 1. Parameteren duration o speed det kreves også for denne metoden som spesifiserer varigheten av animasjonstoningen.
<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() de brukes til å skjule eller vise HTML-elementer ved gradvis å redusere eller øke høyden (dvs. rulle dem opp 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 valgfritt spesifisere varighet eller hastighetsparameter for metodene slideUp() e slideDown() for å kontrollere varigheten av lysbildeanimasjonen. Varighetene kan spesifiseres ved hjelp av en av pre-strengenedefinite 'slow' o 'fast', eller i et antall millisekunder; høyere verdier indikerer tregere animasjoner.
<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å spesifisere en tilbakeringingsfunksjon som skal utføres etter fullføring av metoden 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 valgte elementer ved å animere høyden deres slik at hvis elementet først vises, vil det rulles opp; hvis den er skjult, rulles den nedover, dvs. veksler mellom metoder slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>På samme måte kan du spesifisere 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åte kan du også angi en tilbakeringingsfunksjon 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() den brukes til å lage tilpassede animasjoner. Metoden animate() brukes til å animere numeriske CSS-egenskaper, som f.eks width, height, margin, padding, opacity, top, left etc. men ikke-numeriske egenskaper som color o background-color de kan ikke animeres ved å bruke grunnleggende jQuery-funksjonalitet.
Metodens grunnleggende syntaks animate() det er følgende:
$(selector).animate({ properties }, duration, callback);Metodeparametere animate() har følgende betydninger:
'slow' o 'fast', eller i et antall millisekunder; høyere verdier indikerer tregere animasjoner.Nedenfor er et enkelt eksempel på metoden animate() som animerer et bilde fra sin opprinnelige posisjon til høyre med 300 piksler ved knappeklikk.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Du kan også animere flere egenskaper for et element samtidig ved å bruke metoden animate(). Alle eiendommene ble animert samtidig uten forsinkelser.
<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 egenskaper for et element én etter én individuelt, i en kø ved å bruke jQuerys sammenkoblingsfunksjon.
Følgende eksempel viser en i kø eller lenket jQuery-animasjon, hvor hver animasjon vil starte når den forrige animasjonen på elementet er fullført. Vi vil se sammenkoblingsfunksjonen i en fremtidig artikkel.
<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å mulig defifullfør relative verdier for animerte egenskaper. Hvis en verdi er spesifisert med et prefiks += o -=, beregnes målverdien ved å legge til eller trekke det angitte tallet fra gjeldende verdi av eiendommen.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>I tillegg til numeriske verdier kan hver egenskap godta strenger 'show', 'hide' e 'toggle'. Det vil være veldig nyttig i en situasjon der du bare ønsker å animere eiendommen fra dens nåværende verdi til dens opprinnelige verdi og omvendt.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()jQuery-metoden stop() brukes til å stoppe kjørende jQuery-animasjoner eller effekter på utvalgte elementer før fullføring.
Metodens grunnleggende syntaks stop() jQuery kan gis med:
$(selector).stop(stopAll, goToEnd);Parametrene i syntaksen ovenfor har følgende betydninger:
false, betyr dette at bare den nåværende animasjonen vil bli stoppet, resten av animasjonene i køen vil bli utført senere.false.Her er et enkelt eksempel som viser metoden stop() i real action hvor du kan starte og stoppe animasjonen ved å 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 annet eksempel på denne metoden hvor hvis du klikker på knappen igjenSlide Toggle” etter å ha startet animasjonen, men før den er fullført, vil animasjonen umiddelbart starte i motsatt retning fra det lagrede startpunktet.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Når du oppretter den animerte sveveeffekten, er et av de vanligste problemene du kan støte på at flere animasjoner står i kø når du raskt plasserer og fjerner musepekeren. Hvorfor, i denne situasjonen, mouseenter gli mouseleave hendelser utløses raskt før animasjonen fullføres. For å unngå dette problemet og skape en fin og jevn sveveeffekt kan du legge til stop(true, true)til metodekjeden, slik:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript-setninger utføres linje for linje. Men siden jQuery-effekten tar litt tid å fullføre, kan neste linjes kode kjøre mens den forrige effekten fortsatt kjører. For å forhindre at dette skjer, tilbyr jQuery en tilbakeringingsfunksjon for hver effektmetode.
En tilbakeringingsfunksjon er en funksjon som kjører når effekten er fullført. Tilbakeringingsfunksjonen sendes som et argument til effektens metoder, og de vises vanligvis som det siste metodeargumentet. For eksempel den grunnleggende syntaksen til jQuery-effektmetoden slideToggle() med en tilbakeringingsfunksjon som kan spesifiseres som følger:
$(selector).slideToggle(duration, callback);Tenk på følgende eksempel hvor vi har plassert utsagnene slideToggle()e alert()den ene ved siden av den andre. Hvis du prøver denne koden, vil varselet vises umiddelbart etter at du har klikket på veksleknappen uten å vente på at vekslingseffekten for lysbilde skal fullføres.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Og her er den modifiserte versjonen av det forrige eksemplet der vi satte inn setningen alert() inne i en tilbakeringingsfunksjon for metoden slideToggle(). Hvis du prøver denne koden, vil advarselsmeldingen vises når lysbildevekslingseffekten er fullfø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>På samme måte kan du defifullfør tilbakeringingsfunksjoner for de andre jQuery-effektmetodene, for eksempel show(), hide(), fadeIn(), fadeOut(), animate(), etc.
<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, vil du få samme advarsel to ganger én gang per vare <h1> e <p>, etter å ha klikket på aktiveringsknappen.
BlogInnovazione.it
Marinesektoren er en ekte global økonomisk makt, som har navigert mot et 150 milliarder marked...
Sist mandag kunngjorde Financial Times en avtale med OpenAI. FT lisensierer sin journalistikk i verdensklasse...
Millioner av mennesker betaler for strømmetjenester og betaler månedlige abonnementsavgifter. Det er vanlig oppfatning at du...
Coveware by Veeam vil fortsette å tilby responstjenester for cyberutpressing. Coveware vil tilby kriminaltekniske og utbedringsmuligheter...