El método .animate() en jQuery se usa para manejar efectos y animaciones. Las propiedades que tienen valores numéricos se pueden animar con este método, como el ancho, la altura, el ancho del borde, etc. Sin embargo, los nombres de las propiedades deben estar en mayúsculas y minúsculas (por ejemplo, ancho del borde). Por lo general, si se enstringn diferentes animaciones en el mismo elemento html, jQuery las agrega a una cola y se ejecutan secuencialmente . En este artículo, discutiremos cómo podemos hacer tales animaciones simultáneamente. El método animate() solo se activará después de que ocurra el evento (que se está escuchando) en la página. Para dos elementos HTML diferentes, al activarse un evento, las animaciones ocurrirán simultáneamente.
Según la documentación oficial de jQuery, el método .animate() ofrece dos prototipos:
- .animate(propiedades, [duración], [easing], [completo]): las propiedades son el objeto simple de javascript de las propiedades css seguido de un número entero, una string y un valor booleano para el resto.
- .animate (propiedades, opciones): tanto las propiedades como las opciones son objetos simples de JavaScript. El objeto de opciones se puede pasar con una propiedad opcional de ‘cola’ que nos permite elegir si queremos que las animaciones enstringdas se agreguen a la cola o no. Usaremos el segundo prototipo para el propósito de este ejemplo.
El siguiente código demuestra cómo se verían las animaciones en string:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<title>Document</title>
</head>
<body>
<div class="button">
<button id="bt1">Hey Geeks</button>
</div>
<style>
button{
background-color: rgb(31, 156, 0);
border: none;
color: white;
font-size: 20px;
}
</style>
<script type="text/javascript">
$(document).ready( ()=>{
// Event listener to recognise click
// Animations will occur sequentially
// and will be added to queue
$('#bt1').on('click', () => {
$('#bt1').animate({fontSize : '40px'}, {duration : 1000})
.animate({width : '300px'}, {duration : 1000})
.animate({height : '300px' }, {duration : 1000});
});
});
</script>
</body>
</html>
En el ejemplo anterior, hemos enstringdo tres animaciones al elemento de botón HTML. Las animaciones se disparan al hacer clic. Lo mismo hubiera sucedido con el siguiente conjunto de código:
$(document).ready( ()=>{
// Event listener to listen for click
// Animations will be added to queue
// and occur sequentially
$('#bt1').on('click', () => {
$('#bt1').animate({fontSize : '30px'}, {duration : 1000})
$('#bt1').animate({width : '300px'}, {duration : 1000})
$('#bt1').animate({height : '300px' }, {duration : 1000});
});
});
Producción:
Podemos hacer que las animaciones se activen simultáneamente de dos maneras.
Método 1: usar la propiedad ‘QUEUE’ en las opciones
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<title>Document</title>
</head>
<body>
<div class="button">
<button id="bt1">Button1</button>
</div>
<style>
button{
background-color: rgb(31, 156, 0);
border: none;
color: white;
font-size: 20px;
}
</style>
<script type="text/javascript">
$(document).ready( ()=>{
/* Animations will not be added to queue
and hence occur simultaneously*/
$('#bt1').on('click', () => {
$('#bt1').animate({fontSize : '60px'},
{duration : 1000, queue : false})
.animate({width : '300px'},
{duration : 1000, queue : false})
.animate({height : '300px' },
{duration : 1000, queue : false});
});
});
</script>
</body>
</html>
Producción:
Al pasar la opción , nos aseguramos de que las animaciones no se agreguen a la cola . La cola de animación predeterminada en jQuery se llama fx . El método anterior es especialmente útil cuando desea que ciertas animaciones sucedan simultáneamente y ciertas animaciones sucedan secuencialmente con una mejor legibilidad del código. De forma predeterminada, la cola es verdadera . queue : false
Método 2: pasar todas las propiedades css en un solo objeto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<title>Document</title>
</head>
<body>
<div class="button">
<button id="bt1">Button1</button>
</div>
<style>
button{
background-color: rgb(31, 156, 0);
border: none;
color: white;
font-size: 20px;
}
</style>
<script type="text/javascript">
$(document).ready( ()=>{
/* All the animations have been passed
as a single object and hence will
occur simultaneously*/
$('#bt1').on('click', () => {
$('#bt1').animate({
fontSize : '60px',
width : '300px',
height : '300px'
},
{duration : 1000})
});
});
</script>
</body>
</html>
Producción:
A través de los dos métodos anteriores, la tarea de implementar dos o más animaciones en jQuery se puede implementar simultáneamente en lugar de colocarlas en la cola y ejecutarlas secuencialmente.
Publicación traducida automáticamente
Artículo escrito por tirtharajsengupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA