En aquest article veurem com utilitzar diferents mètodes JQuery per generar animacions.
hide() I show()El mètode hide() simplement estableix l'estil en línia display: none per als elements seleccionats. Per contra, el mètode show() restaura les propietats de visualització.
Vegem un exemple:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>En el primer cas, el paràgraf s'amaga quan feu clic al botó (hide-btn), en el segon cas es mostra el paràgraf en fer clic al botó (show-btn).
També podeu especificar el paràmetre de durada per animar l'espectacle i ocultar l'efecte durant un període de temps.
Les durades es poden especificar mitjançant una de les cadenes prèviesdefinite 'slow' o 'fast', o en un nombre de mil·lisegons, per a una major precisió; valors més alts indiquen animacions més lentes.
<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>La corda predefinita 'fast' indica una durada de 200 mil·lisegons, mentre que la cadena 'slow' indica la durada de 600 mil·lisegons.
Podem especificar una funció de callback s'executarà un cop finalitzat el mètode show() o de 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>El mètode jQuery toggle() mostrar o amagar elements de tal manera que si l'element es mostra inicialment, s'amagarà; al contrari, si està amagat, es mostrarà (pràcticament canvia la seva visibilitat).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>De la mateixa manera, podeu especificar el paràmetre duration pel mètode toggle(), de manera que s'animi la transició entre el visible i l'ocult, com a mètodes 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>De la mateixa manera, també podeu especificar una funció de callback pel mètode 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()Podeu utilitzar els mètodes jQuery fadeIn()e fadeOut() per mostrar o amagar elements HTML, augmentant o disminuint gradualment la seva opacitat i creant un efecte esvaït.
<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>Igual que altres mètodes d'efectes jQuery, podeu especificar opcionalment el paràmetre de durada o velocitat dels mètodes fadeIn()e fadeOut(), per controlar la durada de l'esvaïment. Les durades es poden especificar mitjançant una de les cadenes prèviesdefinite 'slow' o 'fast', o en un nombre de mil·lisegons; valors més alts indiquen animacions més lentes.
<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>l'efecte dels mètodes fadeIn() / fadeOut() És semblant a show() / hide(), però a diferència dels mètodes show() / hide(), els primers només animen l'opacitat dels elements objectiu i no n'animen la mida.
També podeu especificar una funció de callback per executar-se un cop finalitzats els mètodes 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()El mètode jQuery fadeToggle() mostra o amaga els elements seleccionats animant la seva opacitat de manera que si l'element es mostra inicialment, s'esvaeix; si estava amagat, s'esvairà (és a dir, activarà l'efecte de desaparició).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>També podeu especificar el paràmetre de vida útil del mètode fadeToggle() pel que fa als mètodes fadeIn() / fadeOut(), per controlar la durada o la velocitat de l'animació d'esvaïment.
<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>El mètode fadeToggle() també té la capacitat d'especificar una funció 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()El mètode jQuery fadeTo() és semblant al mètode fadeIn(), però a diferència del mètode fadeIn(), el mètode fadeTo() permet combinar elements fins a un cert nivell d'opacitat.
$(selector).fadeTo(speed, opacity, callback);El paràmetre requerit opacity especifica l'opacitat final dels elements objectiu que pot ser un nombre entre 0 i 1. El paràmetre duration o speed també és necessari per a aquest mètode que especifica la durada de l'esvaïment de l'animació.
<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()El mètode jQuery slideUp() e slideDown() s'utilitzen per ocultar o mostrar elements HTML reduint-los o augmentant-los gradualment (és a dir, desplaçant-los cap amunt o cap avall).
<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>Igual que altres mètodes d'efectes jQuery, podeu especificar opcionalment el paràmetre de durada o velocitat dels mètodes. slideUp() e slideDown() per controlar la durada de l'animació de la diapositiva. Les durades es poden especificar mitjançant una de les cadenes prèviesdefinite 'slow' o 'fast', o en un nombre de mil·lisegons; valors més alts indiquen animacions més lentes.
<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>També podeu especificar una funció de devolució de trucada per executar-se després de completar el mètode 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()El mètode jQuery slideToggle() mostrar o amagar els elements seleccionats animant la seva alçada de manera que si l'element es mostra inicialment, es desplaçarà cap amunt; si s'amaga, es desplaçarà cap avall, és a dir, alternarà entre mètodes slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>De la mateixa manera, podeu especificar el paràmetre de vida útil del mètode slideToggle() Venir 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>De la mateixa manera, també podeu especificar una funció de devolució de trucada per al mètode 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()El mètode jQuery animate() s'utilitza per crear animacions personalitzades. El mètode animate() s'utilitza per animar propietats CSS numèriques, com ara width, height, margin, padding, opacity, top, left etc. però propietats no numèriques com color o background-color no es poden animar amb la funcionalitat bàsica de jQuery.
La sintaxi bàsica del mètode animate() és el següent:
$(selector).animate({ properties }, duration, callback);Paràmetres del mètode animate() tenen els significats següents:
'slow' o 'fast', o en un nombre de mil·lisegons; valors més alts indiquen animacions més lentes.A continuació es mostra un exemple senzill del mètode animate() que anima una imatge des de la seva posició original cap a la dreta en 300 píxels en fer clic al botó.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>També podeu animar diverses propietats d'un element alhora mitjançant el mètode animate(). Totes les propietats es van animar al mateix temps sense cap demora.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>També podeu animar múltiples propietats d'un element una per una individualment, en una cua mitjançant la funció de concatenació de jQuery.
L'exemple següent mostra una animació jQuery en cua o encadenada, on cada animació començarà un cop s'hagi completat l'animació anterior de l'element. Veurem la funció de concatenació en un article futur.
<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>També és possible defivalors relatius acabats per a les propietats animades. Si s'especifica un valor amb un prefix += o -=, el valor objectiu es calcula sumant o restant el nombre especificat del valor actual de la propietat.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>A més dels valors numèrics, cada propietat pot acceptar cadenes 'show', 'hide' e 'toggle'. Serà molt útil en una situació en què només voleu animar la propietat des del seu valor actual fins al seu valor inicial i viceversa.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()El mètode jQuery stop() s'utilitza per aturar l'execució d'animacions o efectes jQuery en els elements seleccionats abans de completar-los.
La sintaxi bàsica del mètode stop() jQuery es pot donar amb:
$(selector).stop(stopAll, goToEnd);Els paràmetres de la sintaxi anterior tenen els significats següents:
false, això vol dir que només s'aturarà l'animació actual, la resta d'animacions de la cua s'executaran més tard.false.Aquí teniu un exemple senzill que demostra el mètode stop() en acció real on podeu iniciar i aturar l'animació fent clic al botó.
<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>Aquí teniu un altre exemple d'aquest mètode en què si torneu a fer clic al botóSlide Toggle” després d'iniciar l'animació però abans que finalitzi, l'animació començarà immediatament en la direcció oposada al punt de partida desat.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Quan creeu l'efecte de flotació animat, un dels problemes més habituals que us podeu trobar són diverses animacions a la cua, quan col·loqueu i elimineu ràpidament el cursor del ratolí. Per què, en aquesta situació, mouseenter la mouseleave els esdeveniments es desencadenen ràpidament abans que finalitzi l'animació. Per evitar aquest problema i crear un efecte de flotació agradable i suau, podeu afegir stop(true, true)a la cadena de mètodes, així:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Les sentències de JavaScript s'executen línia per línia. Tanmateix, com que l'efecte jQuery triga un temps a acabar, el codi de la línia següent pot executar-se mentre l'efecte anterior encara s'està executant. Per evitar que això passi, jQuery proporciona una funció de devolució de trucada per a cada mètode d'efecte.
Una funció de devolució de trucada és una funció que s'executa un cop s'ha completat l'efecte. La funció de devolució de trucada es passa com a argument als mètodes de l'efecte, i normalment apareixen com l'últim argument del mètode. Per exemple, la sintaxi bàsica del mètode d'efecte jQuery slideToggle() amb una funció de devolució de trucada que es pot especificar de la següent manera:
$(selector).slideToggle(duration, callback);Considereu l'exemple següent on hem col·locat els enunciats slideToggle()e alert()un al costat de l'altre. Si proveu aquest codi, l'alerta apareixerà immediatament després de fer clic al botó de commutació sense esperar que finalitzi l'efecte de commutació de la diapositiva.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>I aquí teniu la versió modificada de l'exemple anterior on hem inserit la declaració alert() dins d'una funció de devolució de trucada per al mètode slideToggle(). Si proveu aquest codi, el missatge d'advertència apareixerà un cop s'hagi completat l'efecte de commutació de la diapositiva.
<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>De la mateixa manera, pots defiacabar les funcions de devolució de trucada per als altres mètodes d'efecte jQuery, com ara 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>Si proveu el codi d'exemple anterior, rebreu el mateix missatge d'advertència dues vegades per element <h1> e <p>, després de fer clic al botó d'activació.
BlogInnovazione.it
Coveware de Veeam continuarà oferint serveis de resposta a incidents d'extorsió cibernètica. Coveware oferirà capacitats forenses i de reparació...
El manteniment predictiu està revolucionant el sector del petroli i el gas, amb un enfocament innovador i proactiu a la gestió de les plantes.…
La CMA del Regne Unit ha emès una advertència sobre el comportament de Big Tech al mercat de la intel·ligència artificial. Allà…
El Decret "Case Green", formulat per la Unió Europea per millorar l'eficiència energètica dels edificis, ha conclòs el seu procés legislatiu amb...