Updated April 6, 2023
Introduction to jQuery background color animate
The jQuery background color animate is used to set the background color. The jQuery background color animate can be performed with the help of the animate() function. The jQuery animate() function is a built-in function in jQuery. The animate() function is used to apply the animation on the selected set of CSS properties, so for the background color animation, the animate() function can perform the animation on the backgroundColor property. The syntax of the background color animate –
The syntax of the jQuery animate() function with the background-color CSS property –
$("selector").animate({ backgroundColor : value });The syntax of the jQuery css() function with the background-color CSS property –
$("selector").css( "background-color", value);Parameters:
- backgroundColor – It specifies the animate property to set the background colour of the selected element.
- Value – It specifies the colour to set for the background of the selected element. It is a string value.
Return value –
The animate function does not any value.
The working of the jQuery background colour animate –
The jQuery background colour animate performs with the help of the animate() function or the css() function. Suppose we have a div element and we need to apply the background colour animation effects. So we can use the animate() function as “$(‘#bid’).animate({ backgroundColor: “gray”, color: “white” })”, which will change the background colour of the selected element.
Examples for the jQuery background color animate
Here are the following examples mention below
Example #1
Example of jQuery background colour animate to change the background colour of the body –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery background colour animate </title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.divclass {
width : 300px;
height : 100px;
background-color : #b9c06d;
}
.myClass {
font-size: 40px; background-color: #c00; color: white;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#btn').click(function() {
$('#bid').animate({
backgroundColor : "gray",
color : "white"
})
})
});
</script>
</head>
<body id = bid>
<h3> This an example of jQuery ajax background colour animate : </h3>
<div class = "divclass">
Click below button to change the background colour of the body. </div>
<button id = "btn"> Click here </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, when we click on the button its call to animate() function, which will change the background color of the page to gray color by using the code as “$(‘#bid’).animate({ backgroundColor: “gray”, color: “white”}) ”, as we can see in the output.
Example #2
Example of jQuery background color animate to change the background color of the div element on button click –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery background colour animate </title>
<style>
.divclass {
width : 300px;
height : 100px;
background-color : #b9c06d;
}
.myClass {
font-size : 40px; background-color : #c00; color : white;
}
</style>
</head>
<body>
<h3> This an example of jQuery ajax background colour animate : </h3>
<div id = "did" class = "divclass">
Click below button to change the background colour of the div box. </div>
<button id = "btn"> click here </button>
<script type = 'text/javascript'>
$(document).ready(function() {
$( '#btn' ).click( function() {
$( '#did' ).css( "background-color", "yellow");
})
});
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, when we click on the button its call to css() function, which will change the background color of the div element to yellow color by using the code as “$(‘#did’).css(“background-colour”, “yellow” );”, as we can see in the output.
Example #3
Example of jQuery background colour animate to change the background colour of the div element on move enter and exit –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery background colour animate </title>
<style>
.divclass {
width : 300px;
height : 100px;
background-color : #b9c06d;
}
.myClass {
font-size : 40px; background-color : #c00; color : white;
}
</style>
</head>
<body>
<h3> This an example of jQuery ajax background colour animate : </h3>
<div id = "did" class = "divclass">
Click and move the mouse pointer here to change it's background color. </div>
<script type = 'text/javascript'>
$(document).ready(function(){
$( "#did" ).on({
mouseenter: function() {
$( this ).css( "background-color", "yellow");
},
mouseleave: function() {
$(this).css("background-color", "red");
},
});
});
</script>
</body>
</html>An output of the above code is –
Once we scroll the box, the output is –
In the above code, when we move the mouse (enter or leave) over the div element contents its call to css() function which will change the background colour of the div element to yellow and red colour by using the code as for mouse enter “mouseenter: function(){ $(this).css( “background-color”, “yellow”); }” and for the mouse “mouseleave: function(){ $(this).css( “background-color”, “red”); }”, as we can see in the output.
Conclusion
The background color animate can be performed with the help of the animate() function or css() function. The background color animate is used to set the background color of the selected elements.
Recommended Articles
This is a guide to jQuery background color animate. Here we discuss the Working and Examples for the jQuery background color animate. You may also have a look at the following articles to learn more –
