En este artículo, aprenderemos cómo animar la propiedad izquierda de un elemento de división en sincronización con los otros elementos de división. Esto se puede usar en situaciones en las que se deben reposicionar o animar múltiples elementos de división usando solo una propiedad.
Enfoque: Usaremos los métodos jQuery click() , animate() , gt() y css() . Cada elemento que se tenga que animar tendrá una clase de “gfg-animate”.
Se define un botón con una clase de «animation-btn» que, al hacer clic, activará el método animate() aplicado al elemento de la primera división. El método animate() consta de dos parámetros. El primer parámetro contiene el estilo de la propiedad izquierda que se modifica a un nuevo valor. El segundo parámetro establece la velocidad del parámetro usando la propiedad de duración definida dentro de este parámetro.
A continuación, la función de paso se usa para animar la propiedad izquierda de todos los elementos de división con respecto a la propiedad izquierda del primer elemento de división. La propiedad izquierda de los elementos de división se modifica utilizando el método css() dentro de la función de paso. Todos los elementos de división se seleccionan usando el método gt() con el índice especificado como 0.
Nota: Recuerde configurar la posición como relativa de todos los elementos de división ya que cada uno tiene que estar sincronizado con respecto al primer elemento de división.
Ejemplo: en este ejemplo, todos los elementos de división se animan durante tres segundos de acuerdo con la propiedad izquierda del primer elemento de división, que es 250.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
/* Necessary for animation to work */
.gfg-animate {
position: relative;
display: inline-block;
background-color: green;
width: 45px;
height: 45px;
margin-right: 0.5rem;
}
button {
cursor: pointer;
margin: 0 auto;
display: block;
margin-top: 2rem;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="gfg-animate"></div>
<div class="gfg-animate"></div>
<div class="gfg-animate"></div>
<div class="gfg-animate"></div>
<button class="animation-btn">
Click to execute animation
</button>
<script type="text/javascript">
$(".animation-btn").click(function () {
// Get the first division element
// and animate it
$(".gfg-animate:first").animate(
{
left: 250,
},
{
duration: 3000,
step: function (param) {
$(".gfg-animate:gt(0)")
.css("left", param);
},
}
);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA