En este artículo, aprenderemos cómo animar la propiedad izquierda de un elemento de división con un valor relativo usando jQuery. Esto se puede usar en situaciones en las que un elemento de división debe animarse usando solo una propiedad.
Enfoque: Usaremos los métodos jQuery click() y animate() .
- El elemento de división que debe ser animado tiene una clase animate-div .
- Se definen dos botones con clases flecha izquierda y flecha derecha respectivamente que, al hacer clic, activarán el método animate() aplicado al elemento de 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 de la animación utilizando la propiedad de aceleración definida dentro de este parámetro.
- El primer botón con una clase de flecha hacia la izquierda disminuye la propiedad de la izquierda en algún valor, mientras que el segundo botón con una clase de flecha hacia la derecha incrementa la propiedad de la izquierda en algún valor. Entonces, el elemento de división se mueve hacia la izquierda al hacer clic en el primer botón y se mueve hacia la derecha al hacer clic en el segundo botón, simplemente actualizando la propiedad de la izquierda.
Nota: Recuerde establecer la posición como absoluta del elemento de división ya que la propiedad de la izquierda no se puede usar en elementos posicionados estáticamente.
Ejemplo: En este ejemplo, el elemento de división se anima al hacer clic en los dos botones y el elemento de división tiene una propiedad de aceleración lenta. El primer botón con una clase de flecha hacia la izquierda reduce la propiedad izquierda en 25 píxeles, mientras que el segundo botón con una clase de flecha hacia la derecha aumenta la propiedad izquierda en 25 píxeles.
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;
}
p {
font-weight: bold;
font-size: 25px;
}
/* Necessary for animation to work */
.animate-div {
position: absolute;
background-color: green;
left: 730px;
width: 75px;
height: 75px;
margin-top: 2rem;
}
button {
cursor: pointer;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
jQuery - Animate a div's left
property with a relative value
</p>
<button class="left-arrow"><</button>
<button class="right-arrow">></button>
<div class="animate-div"></div>
<script type="text/javascript">
$(".left-arrow").click(function () {
$(".animate-div").animate({ left: "-=25px" }, "slow");
});
$(".right-arrow").click(function () {
$(".animate-div").animate({ left: "+=25px" }, "slow");
});
</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