jQuery: Change Background Color of an Element

  1. jQuery Change Background Color Using the queue() API
  2. jQuery Change Background Color Using the hide() API

This article teaches you how to use jQuery to change the background color of an element on mouseover. We’ll achieve this using two jQuery APIs which are queue() and hide().

jQuery Change Background Color Using the queue() API

This first example will change the background color before and after animation. Here, you’ll need the queue() API because the css() API alone will not work as intended.

That’s because it has an instant effect on the attached element. By using the queue() API, you can pass it a function that fires an effect after the result of the css() API.

This means the initial color in the css() will have an effect at the start of the animation. Afterward, you can change the initial color to another color with the queue() API.

The following is the pseudocode of the process.

  1. Mouse over the button activates the initial color in the css() API.
  2. The element fades away.
  3. The element shows again.
  4. Finally, its color changes to another color defined in the queue() API.

The following code is the implementation of the pseudocode. What follows is the result in a web browser.

In the result, you’ll observe that the animation does not occur the second time you mouse over the button. We’ll address that in the next example.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>01-jQuery-change-background-color-with-queue-API</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style>
		body { display: grid; justify-content: center; align-items: center; height: 100vh; }
		main { border: 3px solid #1a1a1a; padding: 1.2em; display: grid; }
		button { align-self: center; padding: 1.2em; cursor: pointer; }
		p { font-size: 5em; }
	</style>
</head>
<body>
	<main>
		<p id="random_big_text">A big random text.</p>
		<button>Move your mouse here.</button>
	</main>
	<script>
		$(document).ready(function() {
			$("button").mouseover(function() {
				let random_big_text = $("#random_big_text");
				random_big_text.css("background-color", "#ffff00");
				random_big_text.hide(1500).show(1500);
				random_big_text.queue(function() {
					random_big_text.css("background-color", "#ff0000");
				});
			});
		});
	</script>
</body>
</html>

Output:

Change background color using jQuery queue API

jQuery Change Background Color Using the hide() API

Using jQuery hide() API to change background color builds on our first example where we used the queue() API. The result is the same with two differences; we use API chaining, and the effect works every time.

As a result, you can mouse over the button at the end of each animation, and the process will start over. The following code shows you how it’s done; what follows is the result in a web browser.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>02-jQuery-change-background-color-with-hide-API</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style>
		body { display: grid; justify-content: center; align-items: center; height: 100vh; }
		main { border: 3px solid #1a1a1a; padding: 1.2em; display: grid; }
		button { align-self: center; padding: 1.2em; cursor: pointer; }
		p { font-size: 5em; }
	</style>
</head>
<body>
	<main>
		<p id="random_big_text">A big random text.</p>
		<button>Move your mouse here.</button>
	</main>
	<script>
		$(function(){
			$("button").mouseover(function(){
				let random_big_text = $("#random_big_text");
				random_big_text.stop()
			      .css("background-color","#ffff00")
			      .hide(1500, function() {
			          random_big_text.css("background-color","#ff0000")
			            .show(1500);
			      });
			  });
		});
	</script>
</body>
</html>

Output:

Change background color by using jQuery hide API