Introducción: la función jQuery animate() realiza animaciones personalizadas en un conjunto de propiedades CSS.
Sintaxis:
(selector).animate(properties [,duration][,easing][,complete])
Parámetros:
- properties (*obligatorio): Estos definen los objetos de propiedades y valores CSS para animar. Solo se pueden animar valores numéricos como alto, ancho, izquierda, etc., mientras que las propiedades que no son numéricas no se pueden animar, como el color de fondo. Además de los valores numéricos, cada propiedad puede tomar las strings ‘mostrar’, ‘ocultar’ y ‘alternar’.
- duración (opcional): da el número o la duración de la ejecución de la animación. Esto se da en milisegundos. El valor predeterminado, si no se especifica, será de 400 milisegundos. La string ‘rápida’ indica el valor de 200 milisegundos mientras que la string ‘lenta’ indica el valor de 600 milisegundos.
- easing (opcional): Especifica la velocidad a la que avanza la animación en diferentes puntos dentro de la animación. El valor predeterminado es la string ‘swing’. El valor ‘lineal’ ejecutará la animación a un ritmo constante.
- complete (opcional) : una función de devolución de llamada que se llama una vez que se completa la animación.
Ejemplo 1: en este ejemplo, estamos animando el círculo aumentando la altura y el ancho del círculo. También estamos utilizando una función de devolución de llamada que alerta un mensaje una vez que se completa la animación.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<style>
#circle {
height: 150px;
width: 150px;
margin-top: 30px;
padding: 10px;
background-color: #00b3b3;
border-radius: 50%;
display: inline-block;
position: absolute;
}
#btn {
padding: 20px;
font-size: 14px;
}
</style>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#circle").animate({
height: "400px",
width: "400px"
}, 3000, animationcomplete);
});
function animationcomplete() {
alert("animation is completed");
}
});
</script>
</head>
<body>
<button id="btn">Animate</button>
<div id="circle"></div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, estamos animando una imagen de logotipo que salta hacia arriba y hacia abajo sin detenerse. Llamamos repetidamente a la función para que la animación no se detenga como se muestra en el código a continuación.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: brown;
}
img {
position: absolute;
border-radius: 50%;
}
</style>
<script>
$(document).ready(function () {
function Bounce() {
$("#myimg").animate({
top: "100px",
width: "200px"
}, 1000, function () {
$("#myimg").animate({
top: "300px",
width: "250px"
}, 1000, Bounce)
});
}
Bounce();
})
</script>
</head>
<body>
<img id="myimg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210824161630/logo.png"
width="200px" height="200px" />
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por namaldesign y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA