En este artículo, aprenderemos a cambiar el color de cualquier div HTML que esté animado usando jQuery.
Usaremos el método jQuery .animate() para cambiar los colores de fondo de cualquier elemento. La sintaxis para utilizar este método es la siguiente.
Sintaxis:
(selector).animate({css styles},speed,easing,callback)
Los estilos CSS definen las propiedades CSS, como el color de fondo, el relleno, el margen , etc. La velocidad especifica la velocidad de la animación, que por defecto es de 400 milisegundos. La opción de aceleración especifica la velocidad del elemento en diferentes puntos de la animación, por ejemplo, swing o lineal. La devolución de llamada es una función que se ejecutará después de que se complete la animación.
Ejemplo: El siguiente ejemplo ayuda a cambiar el color de cualquier div que esté animado.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">
</script>
<style>
div {
width: 300px;
border: solid 1px black;
border-radius: 5px;
margin-left: 20px;
}
</style>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<p>
<input type="button" id="btn1" value="Animate" />
</p>
<div id="div">Animate Colors</div>
<script>
var animate = true;
$("#btn1").click(function () {
// Changing the background color alongwith
// changing width of the div tag
if (animate)
$("#div").animate({ "background-color": "red",
width: "200px" }, 800);
else
$("#div").animate(
{ "background-color": "green",
width: "300px" },
800
);
animate = !animate;
});
</script>
</body>
</html>
Producción:
