jQuery y animaciones
jQuery y animaciones
jQuery y animaciones es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 1 lecciones en total.
Introducción
Hola:
En esta sección, aprenderemos a crear animaciones con jQuery.
Comencemos.
Métodos show y hide
Métodos show() y hide()
Podemos mostrar y ocultar un objeto del DOM en la pantalla con los métodos show y hide.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script>
/*
hide method hides target
element from DOM.
*/
$('#hide').on('click', function(){
$('#target').hide();
})
/*
show method shows the
target element in the DOM.
*/
$('#show').on('click', function(){
$('#target').show();
});
</script>Método toggle
Método toggle()
Además de estos, existe el método toggle(), cuyo funcionamiento podemos deducir por su nombre. Con este método, si el elemento está oculto, se mostrará. Si está visible, se ocultará.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Toggle</button>
<script>
/*
toggle() method shows or hides the
target element in the DOM.
*/
$('#toggle').on('click', function(){
$('#target').toggle();
});
</script>fadein y fadeout
Métodos fadeIn() y fadeOut()
Ahora veamos los métodos fadeIn y fadeOut, que muestran y ocultan elementos HTML mediante animaciones.
Los métodos fadeIn y fadeOut esperan opcionalmente un valor numérico en milisegundos. El valor determina cuántos milisegundos dura la animación. Si no pasamos ningún argumento, se utiliza el valor predeterminado.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show with Animation</button>
<button id="hide">Hide with Animation</button>
<script>
/*
fadeOut method hides target
element from DOM with Animation
*/
$('#hide').on('click', function(){
$('#target').fadeOut();
})
/*
fadeIn method shows the
target element in the DOM with Animation
*/
$('#show').on('click', function(){
$('#target').fadeIn();
});
</script>fadein y fadeout
fadeOut reduce la opacidad de los elementos durante un tiempo determinado. Cuando la opacidad llega a 0, la propiedad display pasa a ser none.
Es la versión del método hide() que aprendimos anteriormente, con el añadido de una animación de opacidad.
FadeIn es lo contrario del método fadeOut.
Método fadeToggle
Método fadeToggle()
El método fadeToggle() es similar al método toggle(). Si está oculto, lo muestra. Si está visible, lo oculta y, como puede imaginar, lo hace mediante una animación.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Fade Toggle</button>
<script>
/*
fadeToggle() method shows or hides the
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
$('#target').fadeToggle();
});
</script>Animación CSS
Animaciones CSS
Las animaciones en jQuery se realizan mediante el método animate(). Este método recibe un argumento JSON. En este JSON definimos qué propiedades CSS del elemento de destino cambiarán.
El segundo parámetro es el tiempo de animación en milisegundos (es opcional).
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000);
</script>Controlador de eventos de animación
Controlador de eventos de animación
El último argumento que podemos asignar al método animate es el controlador de eventos que podemos ejecutar cuando termine la animación.
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000,
function(){
alert('animation is completed')
});
</script>Animación relativa
Hablemos también de una pequeña ventaja de las animaciones.
A las propiedades que se utilizarán en las animaciones se les pueden asignar valores relativos en lugar de valores absolutos.
Podemos entenderlo mejor en el ejemplo siguiente.
Durante la animación, se añadieron 100px a la propiedad top del elemento de destino correspondiente.
$("button").animate({
top: "+=100px",
});Detener la animación
Detener una animación
Para detener una animación que se está ejecutando, basta con seleccionar el destino para el que se ha definido la animación y utilizar el método stop().
const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();Predefinidas
Predefinidas
Al igual que podemos crear animaciones definiendo propiedades CSS personalizadas con jQuery, también podemos utilizar métodos predefinidos de jQuery.
Veamos el código siguiente.
//showing by slide up animation.
console.log("slideUp animation on div elements");
//hiding by slide up animation.
console.log("slideUp animation on div elements");
/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");Duración de animación relativa
Al igual que en otros métodos de animación, si queremos asignar la duración de la animación en este método, debemos pasarla como primer argumento.
// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");
/*
We can also use a relative
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");Controlador de eventos
Esto es lo último que le contaré sobre la animación de deslizamiento. Hmm, creo que lo había olvidado.
Al igual que en el método animate (para definir un controlador de eventos que se ejecute cuando termine la animación), podemos definir la función anónima en los métodos anteriores como segundo argumento.
setTimeout(function() {
//Call when animation is completed
}, 1000);Enhorabuena
Enhorabuena 🎉
Hemos aprendido JQuery y las animaciones.
En la siguiente sección, aprenderemos las operaciones AJAX.
Preguntas frecuentes
¿La lección «jQuery y animaciones» es gratis?
Sí — el texto completo de «jQuery y animaciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 1 lecciones en total.
¿Qué aprenderé en «jQuery y animaciones»?
jQuery y animaciones Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «jQuery y animaciones»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.