In dit artikel zullen we zien hoe we verschillende JQuery-methoden kunnen gebruiken voor het genereren van animaties.
hide() En show()De methode hide() stelt de stijl eenvoudig inline in display: none voor geselecteerde artikelen. Omgekeerd herstelt de methode show() de weergave-eigenschappen.
Laten we een voorbeeld bekijken:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>In het eerste geval wordt de alinea verborgen als u op de knop klikt (hide-btn), in het tweede geval wordt de alinea getoond wanneer u op de knop klikt (show-btn).
U kunt ook de duurparameter specificeren om het show- en hide-effect gedurende een bepaalde periode te animeren.
Duur kan worden opgegeven met behulp van een van de pre-stringsdefiavond 'slow' o 'fast', of in een aantal milliseconden, voor grotere nauwkeurigheid; hogere waarden duiden op langzamere animaties.
<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>De tekenreeks predefinita 'fast' geeft een duur aan van 200 milliseconden, terwijl de string 'slow' geeft de duur van 600 milliseconden aan.
We kunnen een functie specificeren van callback worden uitgevoerd nadat de methode is voltooid show() of 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>De jQuery-methode toggle() items zodanig weergeven of verbergen dat als het item in eerste instantie wordt weergegeven, het wordt verborgen; omgekeerd, indien verborgen, wordt het weergegeven (verandert praktisch de zichtbaarheid ervan).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Op dezelfde manier kunt u de parameter specificeren duration voor de methode toggle(), op zo'n manier dat de overgang tussen zichtbare en verborgen, zoals methoden, wordt geanimeerd 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>Op dezelfde manier kunt u ook een functie specificeren van callback voor de methode 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()U kunt jQuery-methoden gebruiken fadeIn()e fadeOut() om HTML-elementen weer te geven of te verbergen, door hun dekking geleidelijk te verhogen of te verlagen en een vervagingseffect te creëren.
<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>Net als andere jQuery-effectmethoden, kunt u optioneel een duur- of snelheidsparameter voor methoden specificeren fadeIn()e fadeOut(), om de duur van de fade te regelen. Duur kan worden opgegeven met behulp van een van de pre-stringsdefiavond 'slow' o 'fast', of in een aantal milliseconden; hogere waarden duiden op langzamere animaties.
<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>het effect van de methodes fadeIn() / fadeOut() het is vergelijkbaar met show() / hide(), maar in tegenstelling tot de methoden show() / hide(), animeren de eerste alleen de dekking van de doelelementen en animeren ze hun grootte niet.
U kunt ook een functie specificeren van callback uitvoeren nadat de methoden zijn voltooid 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()De jQuery-methode fadeToggle() toont of verbergt geselecteerde elementen door hun ondoorzichtigheid zodanig te animeren dat als het element aanvankelijk wordt weergegeven, het wordt vervaagd; als het verborgen was, zal het vervagen (d.w.z. schakel het fade-effect in).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>U kunt ook de levensduurparameter voor de methode opgeven fadeToggle() wat betreft de methodes fadeIn() / fadeOut(), om de duur of snelheid van de fade-animatie te regelen.
<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>De methode fadeToggle() heeft ook de mogelijkheid om een functie op te geven 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()De jQuery-methode fadeTo() het is vergelijkbaar met de methode fadeIn(), maar in tegenstelling tot de methode fadeIn(), de methode fadeTo() laat je elementen overvloeien tot een bepaald niveau van dekking.
$(selector).fadeTo(speed, opacity, callback);De vereiste parameter opacity specificeert de uiteindelijke dekking van de doelelementen die een getal kan zijn tussen 0 en 1. De parameter duration o speed het is ook vereist voor deze methode die de duur van de animatievervaging specificeert.
<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()De jQuery-methode slideUp() e slideDown() worden gebruikt om HTML-elementen te verbergen of weer te geven door hun hoogte geleidelijk te verkleinen of te vergroten (d.w.z. omhoog of omlaag scrollen).
<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>Net als andere jQuery-effectmethoden, kunt u optioneel een duur- of snelheidsparameter voor de methoden specificeren slideUp() e slideDown() om de duur van de dia-animatie te regelen. Duur kan worden opgegeven met behulp van een van de pre-stringsdefiavond 'slow' o 'fast', of in een aantal milliseconden; hogere waarden duiden op langzamere animaties.
<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>U kunt ook een callback-functie specificeren die moet worden uitgevoerd nadat de methode is voltooid 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()De jQuery-methode slideToggle() toon of verberg geselecteerde elementen door hun hoogte te animeren, zodat als het element in eerste instantie wordt weergegeven, het omhoog wordt geschoven; indien verborgen, wordt het naar beneden gescrold, d.w.z. schakelt tussen methoden slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Op dezelfde manier kunt u de levensduurparameter voor de methode opgeven slideToggle() hoe 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>Op dezelfde manier kunt u ook een callback-functie voor de methode specificeren 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()De jQuery-methode animate() het wordt gebruikt om aangepaste animaties te maken. De methode animate() wordt gebruikt om numerieke CSS-eigenschappen te animeren, zoals width, height, margin, padding, opacity, top, left enz. maar niet-numerieke eigenschappen zoals color o background-color ze kunnen niet worden geanimeerd met de basisfunctionaliteit van jQuery.
De basissyntaxis van de methode animate() è la seguente:
$(selector).animate({ properties }, duration, callback);Methode parameters animate() hebben de volgende betekenissen:
'slow' o 'fast', of in een aantal milliseconden; hogere waarden duiden op langzamere animaties.Hieronder een eenvoudig voorbeeld van de methode animate() die een afbeelding van zijn oorspronkelijke positie naar rechts beweegt met 300 pixels bij klikken op de knop.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>U kunt ook meerdere eigenschappen van een element tegelijk animeren met behulp van de methode animate(). Alle eigendommen werden zonder enige vertraging tegelijkertijd geanimeerd.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>U kunt ook meerdere eigenschappen van een element één voor één afzonderlijk animeren, in een wachtrij met behulp van de aaneenschakelingsfunctie van jQuery.
Het volgende voorbeeld toont een in de wachtrij geplaatste of geketende jQuery-animatie, waarbij elke animatie start zodra de vorige animatie op het element is voltooid. We zullen de concatenatiefunctie in een toekomstig artikel zien.
<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>Het is ook mogelijk defibeëindig relatieve waarden voor geanimeerde eigenschappen. Als een waarde is opgegeven met een voorvoegsel += o -=, wordt de doelwaarde berekend door het opgegeven getal op te tellen bij of af te trekken van de huidige waarde van de eigenschap.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Naast numerieke waarden kan elke eigenschap tekenreeksen accepteren 'show', 'hide' e 'toggle'. Het zal erg handig zijn in een situatie waarin u de eigenschap gewoon wilt animeren van de huidige waarde naar de beginwaarde en vice versa.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()De jQuery-methode stop() wordt gebruikt om momenteel lopende jQuery-animaties of effecten op geselecteerde items te stoppen voordat ze zijn voltooid.
De basissyntaxis van de methode stop() jQuery kan gegeven worden met:
$(selector).stop(stopAll, goToEnd);De parameters in de bovenstaande syntaxis hebben de volgende betekenis:
false, betekent dit dat alleen de huidige animatie wordt gestopt, de rest van de animaties in de wachtrij wordt later uitgevoerd.false.Hier is een eenvoudig voorbeeld dat de methode demonstreert stop() in echte actie waar u de animatie kunt starten en stoppen door op een knop te klikken.
<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>Hier is nog een voorbeeld van deze methode waarbij u nogmaals op de knop kliktSlide Toggle” na het starten van de animatie maar voordat deze is voltooid, start de animatie onmiddellijk in de tegenovergestelde richting van het opgeslagen startpunt.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Bij het maken van het geanimeerde zweefeffect is een van de meest voorkomende problemen die u kunt tegenkomen meerdere animaties in de wachtrij, wanneer u snel de muiscursor plaatst en verwijdert. Waarom in deze situatie mouseenter gli mouseleave gebeurtenissen worden snel geactiveerd voordat de animatie is voltooid. Om dit probleem te voorkomen en een mooi en soepel zweefeffect te creëren, kunt u toevoegen stop(true, true)naar de methodeketen, zoals zo:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript-statements worden regel voor regel uitgevoerd. Omdat het jQuery-effect echter enige tijd nodig heeft om te voltooien, kan de code van de volgende regel worden uitgevoerd terwijl het vorige effect nog steeds actief is. Om dit te voorkomen, biedt jQuery een callback-functie voor elke effectmethode.
Een callback-functie is een functie die wordt uitgevoerd zodra het effect is voltooid. De callback-functie wordt doorgegeven als een argument aan de methoden van het effect en ze verschijnen meestal als het laatste methode-argument. Bijvoorbeeld de basissyntaxis van de jQuery-effectmethode slideToggle() met een callback-functie die als volgt kan worden gespecificeerd:
$(selector).slideToggle(duration, callback);Beschouw het volgende voorbeeld waarin we de verklaringen hebben geplaatst slideToggle()e alert()de een naast de ander. Als u deze code probeert, verschijnt de waarschuwing onmiddellijk nadat u op de schakelknop hebt geklikt zonder te wachten tot het schuifschakeleffect is voltooid.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>En hier is de gewijzigde versie van het vorige voorbeeld waarin we de verklaring hebben ingevoegd alert() binnen een callback-functie voor de methode slideToggle(). Als u deze code probeert, verschijnt het waarschuwingsbericht zodra het schuifschakeleffect is voltooid.
<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>Evenzo kunt u defivoltooi callback-functies voor de andere jQuery-effectmethoden, zoals 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>Als u de bovenstaande voorbeeldcode probeert, krijgt u dezelfde waarschuwing twee keer per item <h1> e <p>, nadat u op de activeringsknop hebt geklikt.
BlogInnovazione.it
Afgelopen maandag maakte de Financial Times een deal met OpenAI bekend. FT geeft licenties voor haar journalistiek van wereldklasse...
Miljoenen mensen betalen voor streamingdiensten en betalen maandelijkse abonnementskosten. De algemene mening is dat je…
Coveware by Veeam zal responsdiensten op het gebied van cyberafpersingsincidenten blijven leveren. Coveware zal forensische en herstelmogelijkheden bieden...
Voorspellend onderhoud zorgt voor een revolutie in de olie- en gassector, met een innovatieve en proactieve benadering van fabrieksbeheer.…