Color de fondo de animación jQuery

Anika Tabassum Era 15 febrero 2024

jQuery jQuery Animate

Use css() para cambiar el color de fondo con jQuery
Utilice el método animate() con la biblioteca jQueryUI
Utilice el método animate() con el complemento jQuery-colors

No hay una forma directa de cambiar un color de fondo div o cualquier elemento con las convenciones de jQuery. Esto implica que podemos cambiar la propiedad a través del método css() directamente, pero eso carece de jQuery.

El método css() de jQuery se conecta directamente con el CSS, y la mayoría de las propiedades se ven afectadas indistintamente. Más precisamente, es una forma de CSS básico.

Veremos un ejemplo de cómo funciona.

A continuación, podemos depender de la función animar() para resolver esta tarea. Pero según la documentación, el método animate() solo es efectivo en el caso de propiedades numéricas.

Las propiedades no numéricas como el color de fondo, el color, etc., no son tratadas por el método animate() a menos que agreguemos la biblioteca jQueryUI. Tiene múltiples temas y varios complementos que le permiten activar la función animar().

Nuestras siguientes instancias también tendrán una demostración para este caso.

Otra tarea fácil es agregar un complemento básico para iniciar el método animate() para tratar con propiedades no numéricas. Aquí, cubriremos el tema con un ejemplo del complemento jQuery-colors.

Así que saltemos a las líneas de código.

Use `css()` para cambiar el color de fondo con jQuery

Tendremos un elemento básico div con una dimensión fija. Se agregará un botón en el que se puede hacer clic, cambiando el color de fondo con un clic.

Aquí, en la sintaxis notará que usamos .css({'background-color': 'value'}). Y este método tiene una amplia gama de preferencias de color.

Fragmento de código:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <title>JS Bin</title>
</head>
<body>
  <div class="my" style="height:100px;width:100px"></div>
  <button id="btn">Hit</button>
<script>
  $(function(){
  $('#btn').click(function () {
     $('.my').css({ 'background-color': 'darkcyan' });
    });
  });
  </script>
</body>
</html>

Producción:

Use css() para aplicar el color de fondo

Utilice el método `animate()` con la biblioteca `jQueryUI`

En este sentido, utilizaremos dos CDN. Uno para el archivo js y otro para el tema.

La biblioteca también se compone de muchos otros complementos. Entonces, en cierto sentido, es a granel.

Sin embargo, la sintaxis aquí para actualizar el fondo será .animate({backgroundColor: "value"}). También puede insertar valores RGB o valores “hexadecimales” para el color.

Pero en comparación, este método tiene un cumplimiento de color pocos.

Fragmento de código:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<div class="my" style="height:100px;width:100px"></div>
<button id="btn">Demo</button>
<script>
$( "#btn" ).click(function() {
  $( ".my" ).animate({
    backgroundColor: "blue"
  });
});
</script>
</body>
</html>

Producción:

Use el método animate () con la biblioteca jQueryUI

Utilice el método `animate()` con el complemento `jQuery-colors`

Un complemento simple es mucho más óptimo que depender de una biblioteca. Entonces, el complemento jQuery-colors servirá para animar el color de fondo.

Usaremos un CDN aquí para inicializar las importaciones necesarias. También tiene una gama limitada de colecciones de tonos.

Fragmento de código:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color Animation Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js" integrity="sha512-VjRpiWhUqdNa9bwBV7LnlG8CwsCVPenFyOQTSRTOGHw/tjtME96zthh0Vv9Itf3i8w4CkUrdYaS6+dAt1m1YXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="my" style="height:100px;width:100px"></div>
<button id="btn">colors</button>
<script>
$( "#btn" ).click(function() {
  $( ".my" ).animate({backgroundColor: "green"});
});
</script>
</body>
</html>