The jQuery UI Animation facilitates the addition of some methods in core jQuery to extend the features of animate functionality and to animate different transitions for an element. Animating colors is also supported by the jQuery UI. Multiple CSS properties can also be animated to define an element color.
The CSS properties that support the animate method are listed below:
- backgroundColor: Used to set the background color of the element.
- borderTopColor: Used to set the color for the top side of the element border.
- borderBottomColor: Used to set the color for the bottom side of the element border.
- borderLeftColor: Used to set the color for the left side of the element border.
- borderRightColor: Used to set the color for the right side of the element border.
- color: Used to set the text color of the element.
- outlineColor: Used to set the color for the outline and to emphasize the element.
Syntax:
$( "#selector" ).animate(
{ backgroundColor: "red",
color: "blue"
}
);
To add multiple properties in this method, the properties are separated using a comma.
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI addClass Example</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.element {
width: 150px;
height: 30px;
background-color: crimson;
color: white;
text-align: center;
padding: 10px;
font-size: 25px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#btn').click(function() {
$('#Target').animate({
backgroundColor: "gray",
color: "white",
})
})
});
</script>
</head>
<body>
<div id="Target" class="element">
Hello World!!</div>
<br>
<button id="btn">Click Me</button>
</body>
</html>
Explanation:
In the above example, we are displaying the color animate method with the use of the addClass() method.
Example 2: jQuery UI Color Animate with Toggle:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Animate demo</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.tglr { width: 300px; height: 150px; position: relative; }
#btn { padding: .5em 1em; text-decoration: none; }
#effect { width: 200px; height: 120px; padding: 0.4em; position: relative; background: #fff; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
var state = true;
$( "#btn" ).click(function() {
if ( state ) {
$( "#effect" ).animate({
backgroundColor: "gray",
color: "white",
width: 600
}, 500 );
} else {
$( "#effect" ).animate({
backgroundColor: "black",
color: "white",
width: 300
}, 700 );
}
state = !state;
});
});
</script>
</head>
<body>
<div class="tglr">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Hello World!!</h3>
<p>
Lets us learn something new today...
</p>
</div>
</div>
<button id="btn" class="ui-state-default ui-corner-all">Toggle</button>
</body>
</html>
Explanation:
In the above example, we are displaying the color animate method with the use of the toggle effect. Here, the background color of the element changes on the first click of the toggle button from white to gray, and the background color changes from gray to black on the second click of the toggle button. The width of the element also varies from 200 pixels to 600 pixels on the first click and varies from 600 pixels to 300 pixels on the second click of the toggle button. Thus there are two states of transition of the element. The time duration of the transition is also specified for both the states of the animation effect.