Neste artigo veremos como usar diferentes métodos JQuery para xerar animacións.
hide() E show()O método hide() simplemente establece o estilo en liña display: none para elementos seleccionados. Pola contra, o método show() restaura as propiedades de visualización.
Vexamos un exemplo:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>No primeiro caso o parágrafo está oculto ao facer clic no botón (hide-btn), no segundo caso móstrase o parágrafo ao facer clic no botón (show-btn).
Tamén pode especificar o parámetro de duración, para animar o espectáculo e ocultar o efecto durante un período de tempo.
As duracións pódense especificar mediante unha das cadeas previasdefinoite 'slow' o 'fast', ou nun número de milisegundos, para unha maior precisión; valores máis altos indican animacións máis lentas.
<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>A corda predefinita 'fast' indica unha duración de 200 milisegundos, mentres que a cadea 'slow' indica a duración de 600 milisegundos.
Podemos especificar unha función de callback que se executará despois de completar o método show() ou 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>O método jQuery toggle() mostrar ou ocultar elementos de tal xeito que se o elemento se mostra inicialmente, ocultarase; pola contra, se está oculto, mostrarase (practicamente cambia a súa visibilidade).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Do mesmo xeito, pode especificar o parámetro duration para o método toggle(), de forma que se anime a transición entre o visible e o oculto, como métodos 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>Do mesmo xeito, tamén pode especificar unha función de callback para o método 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()Podes usar métodos jQuery fadeIn()e fadeOut() para mostrar ou ocultar elementos HTML, aumentando ou diminuíndo gradualmente a súa opacidade e creando un efecto de desvanecemento.
<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>Do mesmo xeito que outros métodos de efectos jQuery, pode especificar opcionalmente o parámetro de duración ou velocidade para os métodos fadeIn()e fadeOut(), para controlar a duración do fade. As duracións pódense especificar mediante unha das cadeas previasdefinoite 'slow' o 'fast', ou nun número de milisegundos; valores máis altos indican animacións máis lentas.
<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>o efecto dos métodos fadeIn() / fadeOut() É semellante a show() / hide(), pero a diferenza dos métodos show() / hide(), os primeiros só animan a opacidade dos elementos obxectivo e non animan o seu tamaño.
Tamén pode especificar unha función de callback para executar despois de completar os métodos 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()O método jQuery fadeToggle() mostra ou oculta os elementos seleccionados animando a súa opacidade de xeito que se o elemento se mostra inicialmente, desaparecerá; se estaba oculto, desaparecerá (é dicir, activará o efecto de desvanecemento).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Tamén pode especificar o parámetro de duración do método fadeToggle() en canto aos métodos fadeIn() / fadeOut(), para controlar a duración ou a velocidade da animación de fundido.
<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>O método fadeToggle() tamén ten a capacidade de especificar unha función 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()O método jQuery fadeTo() é semellante ao método fadeIn(), pero a diferenza do método fadeIn(), o método fadeTo() permítelle mesturar elementos ata un certo nivel de opacidade.
$(selector).fadeTo(speed, opacity, callback);O parámetro necesario opacity especifica a opacidade final dos elementos de destino que pode ser un número entre 0 e 1. O parámetro duration o speed tamén é necesario para este método que especifica a duración do desvanecemento da animación.
<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()O método jQuery slideUp() e slideDown() úsanse para ocultar ou mostrar elementos HTML diminuíndo ou aumentando gradualmente a súa altura (é dicir, desprazándoos cara arriba ou abaixo).
<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>Como outros métodos de efectos jQuery, pode especificar opcionalmente o parámetro de duración ou velocidade para os métodos. slideUp() e slideDown() para controlar a duración da animación da diapositiva. As duracións pódense especificar mediante unha das cadeas previasdefinoite 'slow' o 'fast', ou nun número de milisegundos; valores máis altos indican animacións máis lentas.
<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>Tamén pode especificar unha función de devolución de chamada para executar despois de completar o método 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()O método jQuery slideToggle() mostrar ou ocultar os elementos seleccionados animando a súa altura para que, se o elemento se mostra inicialmente, desprácese cara arriba; se está oculto, desprazarase cara abaixo, é dicir, alterna entre métodos slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Do mesmo xeito, pode especificar o parámetro de duración do método slideToggle() Vir 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>Do mesmo xeito, tamén pode especificar unha función de devolución de chamada para o método 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()O método jQuery animate() úsase para crear animacións personalizadas. O método animate() úsase para animar propiedades CSS numéricas, como width, height, margin, padding, opacity, top, left etc. pero propiedades non numéricas como color o background-color non se poden animar usando a funcionalidade básica de jQuery.
A sintaxe básica do método animate() é o seguinte:
$(selector).animate({ properties }, duration, callback);Parámetros do método animate() teñen os seguintes significados:
'slow' o 'fast', ou nun número de milisegundos; valores máis altos indican animacións máis lentas.A continuación móstrase un exemplo sinxelo do método animate() que anima unha imaxe desde a súa posición orixinal cara á dereita en 300 píxeles ao facer clic no botón.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Tamén podes animar varias propiedades dun elemento á vez usando o método animate(). Todas as propiedades foron animadas ao mesmo tempo sen demora.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Tamén pode animar varias propiedades dun elemento unha por unha individualmente, nunha cola usando a función de concatenación de jQuery.
O seguinte exemplo mostra unha animación jQuery en cola ou encadeada, onde cada animación comezará unha vez que se complete a animación anterior do elemento. Veremos a función de concatenación nun artigo futuro.
<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>Tamén é posible defivalores relativos acabados para as propiedades animadas. Se se especifica un valor cun prefixo += o -=, o valor obxectivo calcúlase sumando ou restando o número especificado do valor actual da propiedade.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Ademais dos valores numéricos, cada propiedade pode aceptar cadeas 'show', 'hide' e 'toggle'. Será moi útil nunha situación na que só quere animar a propiedade desde o seu valor actual ata o seu valor inicial e viceversa.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()O método jQuery stop() úsase para deixar de executar actualmente animacións ou efectos jQuery nos elementos seleccionados antes de completar.
A sintaxe básica do método stop() jQuery pódese dar con:
$(selector).stop(stopAll, goToEnd);Os parámetros da sintaxe anterior teñen os seguintes significados:
false, isto significa que só se deterá a animación actual, o resto das animacións da cola executaranse máis tarde.false.Aquí tes un exemplo sinxelo que demostra o método stop() en acción real onde podes iniciar e deter a animación ao facer clic no botón.
<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í tes outro exemplo deste método no que se fai clic de novo no botónSlide Toggle” despois de iniciar a animación pero antes de que se complete, a animación comezará inmediatamente na dirección oposta ao punto de partida gardado.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Mentres creas o efecto de paso do rato animado, un dos problemas máis comúns que podes atopar son varias animacións en cola, cando colocas e eliminas rapidamente o cursor do rato. Por que, nesta situación, mouseenter gli mouseleave os eventos desenvólvense rapidamente antes de que finalice a animación. Para evitar este problema e crear un efecto de paso suave e agradable, podes engadir stop(true, true)á cadea de métodos, así:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>As instrucións de JavaScript execútanse liña por liña. Non obstante, dado que o efecto jQuery tarda algún tempo en rematar, o código da seguinte liña pode executarse mentres o efecto anterior aínda está en execución. Para evitar que isto suceda, jQuery proporciona unha función de devolución de chamada para cada método de efecto.
Unha función de devolución de chamada é unha función que se executa unha vez que se completa o efecto. A función de devolución de chamada pásase como argumento aos métodos do efecto, e normalmente aparecen como o último argumento do método. Por exemplo, a sintaxe básica do método de efecto jQuery slideToggle() cunha función de devolución de chamada que se pode especificar do seguinte xeito:
$(selector).slideToggle(duration, callback);Considere o seguinte exemplo onde colocamos os enunciados slideToggle()e alert()un ao lado do outro. Se probas este código, a alerta aparecerá inmediatamente despois de facer clic no botón de alternancia sen esperar a que se complete o efecto de alternancia.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>E aquí está a versión modificada do exemplo anterior onde inserimos a declaración alert() dentro dunha función de devolución de chamada para o método slideToggle(). Se probas este código, a mensaxe de aviso aparecerá unha vez que se complete o efecto de alternancia de diapositivas.
<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>Así mesmo, podes defirematar as funcións de devolución de chamada para os outros métodos de efecto jQuery, como 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>Se probas o código de mostra anterior, recibirás a mesma mensaxe de aviso dúas veces por elemento <h1> e <p>, despois de facer clic no botón de activación.
BlogInnovazione.it
O pasado luns, o Financial Times anunciou un acordo con OpenAI. FT licencia o seu xornalismo de clase mundial...
Millóns de persoas pagan por servizos de streaming, pagando taxas de subscrición mensuais. É unha opinión común que vostede...
Coveware by Veeam continuará ofrecendo servizos de resposta a incidentes de extorsión cibernética. Coveware ofrecerá capacidades forenses e de remediación...
O mantemento preditivo está a revolucionar o sector do petróleo e do gas, cun enfoque innovador e proactivo para a xestión das plantas...