El animate() es un método incorporado en jQuery que se usa para cambiar el estado del elemento con estilo CSS . Este método también se puede usar para cambiar la propiedad CSS para crear el efecto animado para el elemento seleccionado.
Sintaxis:
(selector).animate({styles}, para1, para2, para3);
Aquí “selector” es el elemento seleccionado.
Parámetro: Acepta cuatro parámetros que se especifican a continuación:
- Estilos: ayuda a establecer una nueva propiedad css.
- para1: Es un parámetro opcional y se utiliza para configurar la velocidad del parámetro y su valor predeterminado es 400 milisegundos.
- para2: Es opcional y especifica la velocidad del elemento en diferentes posiciones.
- para3: es una función opcional que se utiliza para realizar una vez que se completa la animación.
Valor de retorno: Devuelve el cambio que se realizó utilizando el método anterior.
Código #1:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
<!-- jQuery code to show animate() method -->
$(document).ready(function() {
$("#b1").click(function() {
$("#box").animate({
width: "300px"
});
$("#box").animate({
height: "300px"
});
});
});
</script>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
#b1 {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
<!-- click on this button -->
<button id="b1">Click Here !</button>
</body>
</html>
Salida:
antes de hacer clic en «¡Haga clic aquí!» botón-
Después de hacer clic en el botón «¡Haga clic aquí!» botón-
Código #2:
En el siguiente código, todos los parámetros se pasan a este método.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<style>
div {
background-color: green;
height: 100px;
width: 100px;
margin-top: 10px;
}
#b1 {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
<!-- click here and animation will start -->
<button id="b1">Click Here !</button>
<!-- jQuery code to show the animate method -->
<script>
$(document).ready(function() {
$("#b1").click(function() {
$("#box").animate({
height: "200px",
width: "200px"
}, {
duration: 1000,
easing: "linear",
complete: function() {
$(this).after("<p>Reaches to maximum height and width !</p>");
}
});
});
});
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón «Haga clic aquí»-
Después de hacer clic en el botón «Haga clic aquí»-
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA