El método .animate() de jQuery se utiliza para crear animaciones personalizadas aplicando cambios graduales a los valores de los atributos CSS de los elementos seleccionados. Es una herramienta poderosa para agregar interactividad y dinamismo a las páginas web.
Definición:
El método .animate() realiza una animación de los atributos CSS de los elementos seleccionados según los valores especificados.
Sintaxis:
$(selector).animate(properties, duration, easing, complete)selector: Un selector de jQuery que selecciona los elementos que se animarán.properties: Un objeto que define los atributos CSS que se animarán y sus valores finales.duration(opcional): La duration de la animación en milisegundos o utilizando las cadenas “slow” o “fast”.easing(opcional): Una cadena que indica la función de aceleración de la animación (por defecto, “swing”).complete(opcional): Una función que se ejecuta una vez que la animación ha terminado.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .animate() en jQuery</title>
<style>
#cuadro {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#botonAnimar").click(function(){
$("#cuadro").animate({
left: '250px',
opacity: 0.5,
height: '150px',
width: '150px'
}, 2000, 'swing', function(){
alert('Animación completa');
});
});
});
</script>
</head>
<body>
<button id="botonAnimar">Animar Cuadro</button>
<div id="cuadro"></div>
</body>
</html>$("#cuadro").animate({
left: '250px',
opacity: 0.5,
height: '150px',
width: '150px'
}, 2000, 'swing', function(){
alert('Animación completa');
});Explicación del Ejemplo:
En este ejemplo, al hacer clic en el botón con el id “botonAnimar”, el div con el id “cuadro” se anima cambiando sus propiedades CSS: se mueve 250 píxeles a la derecha, su opacidad se reduce al 50%, y su tamaño se incrementa a 150×150 píxeles. La animación dura 2000 milisegundos (2 segundos) y utiliza la función de aceleración “swing”. Una vez completada la animación, se muestra una alerta indicando que la animación ha terminado.
