Luego , el método animate() disponible en jQuery podría usarse para crear una interfaz de usuario interactiva para nuestras páginas web. Usamos el método animate() para realizar una animación personalizada de un conjunto de propiedades CSS.
El método animate() no podrá animar valores de string, por ejemplo, no podemos animar el «color de fondo» y propiedades similares en jQuery normal. Solo podremos animar valores numéricos únicos. Por ejemplo, altura, peso, margen, relleno , etc.
En este artículo, veremos varios escenarios en los que podemos hacer un uso real del método animate() .
Sintaxis:
.animate( <css properties>, duration, easing, callback)
- Propiedades CSS: altura, peso, margen, relleno, etc. (propiedades con valores numéricos únicos).
- duración: Será una string o número que determinará cuánto tiempo se ejecutará la animación.
- callback: Es una función a la que se podría llamar cuando finalice la animación.
Veremos algunos ejemplos que creamos con el método .animate y usamos en nuestros proyectos.
Ejemplo 1: el siguiente ejemplo anima una barra de búsqueda al pasar el mouse. Vamos a crear una barra de búsqueda de tamaño normal, pero cuando pasemos el mouse, el ancho de la barra de búsqueda se ampliará.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: rgb(34, 34, 34);
}
#Container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
}
#t1 {
margin: 20px;
padding-left: 10px;
font-size: 20px;
text-align: center;
width: 50px;
height: 50px;
border: none;
background-color: floralwhite;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210816221058/searchIcon.png");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
outline: none;
}
</style>
</head>
<body>
<div id="Container">
<h3>SEARCH</h3>
<input type="text" id="t1" />
</div>
<script>
$(document).ready(function() {
$("#t1").mouseover(function() {
$("#t1").animate({
width: "200px",
borderRadius: "50px",
backgroundSize: "0px",
});
});
$("#t1").mouseout(function() {
$("#t1").animate({
width: "50px",
borderRadius: "50px",
backgroundSize: "30px",
});
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra la animación de una pantalla de carga utilizando el valor de opacidad. En este ejemplo, crearemos un texto de carga que se animará con la opacidad, para tener la sensación de que aún se está cargando.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: rgb(34, 34, 34);
}
#Container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
}
.loading {
height: 50px;
width: 200px;
background-color: rgb(0, 0, 0);
color: green;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="Container">
<div class="loading">
Loading...
</div>
</div>
<script>
$(document).ready(function() {
var div = $(".loading");
div.animate({
opacity: '0.5'
}, "slow");
div.animate({
opacity: '0.9'
}, "slow");
div.animate({
opacity: '0.5'
}, "slow");
div.animate({
opacity: '0.9'
}, "slow");
div.animate({
opacity: '0.5'
}, "slow");
div.animate({
opacity: '0.9'
}, "slow");
});
</script>
</body>
</html>
Producción:
