jQuery Animation Background Color

Anika Tabassum Era Jul 13, 2022

jQuery jQuery Animate

Use css() to Change the Background Color With jQuery
Use the animate() Method With jQueryUI Library
Use the animate() Method With jQuery-colors Plug-In

There is no direct way to change a div background color or any element with the jQuery conventions. This implies we can change the property through the css() method directly, but that lacks some jQuery.

The css() method of jQuery directly connects with the CSS, and mostly the properties are affected interchangeably. More precisely, it is a form of basic CSS.

We will see an example of how it works.

Next, we can depend on the animate() function to solve this task. But according to the documentation, the animate() method is only effective in the case of numerical properties.

Non-numerical properties like background color, color, etc., are not dealt with by the animate() method unless we add the jQueryUI library. It has multiple themes and several plug-ins that enable it to power up the animate() function.

Our following instances will have a demonstration for this case as well.

Another easy task is to add a basic plug-in to initiate the animate() method to deal with non-numerical properties. Here, we will cover the topic with an example of the plug-in jQuery-colors.

So let’s hop into the code lines.

Use `css()` to Change the Background Color With jQuery

We will have a basic div element with a fixed dimension. A clickable button will be added, changing the background color with a click.

Here, in the syntax you will notice we use .css({'background-color': 'value'}). And this method has a wide range of color preferences.

Code Snippet:

<!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>

Output:

Use css() to Effect the Background Color

Use the `animate()` Method With `jQueryUI` Library

In this regard, we will use two CDNs. One for the js file and the other for the theme.

The library is comprised of multiple other plug-ins as well. So, in a sense, it is bulk.

However, the syntax here for updating the background will be .animate({backgroundColor: "value"}). You might insert RGB values, or hex values for color as well.

But in comparison, this method has a few color compliance.

Code Snippet:

<!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>

Output:

Use animate() Method with jQueryUI Library

Use the `animate()` Method With `jQuery-colors` Plug-In

A simple plug-in is far more optimal rather than relying on a library. So, the jQuery-colors plug-in will serve the purpose of animating the background color.

We will use a CDN here to initialize the necessary imports. It also has a limited range of hue collections.

Code Snippet:

<!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>