JqueryUI - Color Animation, JqueryUI,
jQueryUI extends some core jQuery methods so that you can animate different transitions for an element. One of them being animate method. jQueryUI extends the jQuery animate method, to add support for animating colors. You can animate one of several CSS properties that define an element’s colors. Following are the CSS properties that the animate method supports.- backgroundColor − Sets the background color of the element.
- borderTopColor − Sets the color for top side of the element border.
- borderBottomColor − Sets the color for bottom side of the element border.
- borderLeftColor − Sets the color for left side of the element border.
- borderRightColor − Sets the color for right side of the element border.
- color − Sets the text color of the element.
- outlineColor − Sets the color for the outline; used to emphasize the element.
Syntax
The following is the syntax of the jQueryUI animate method −$( "#selector" ).animate(You can set any number of properties in this method separated by , (comma).
{ backgroundColor: "black",
color: "white"
}
);
Example
The following example demonstrates the use of addClass() methods.<!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>
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px; background-color: #ccc; color: white;
}
</style>
<script type = "text/javascript">
$(document).ready(function() {
$('#button-1').click(function() {
$('#animTarget').animate({
backgroundColor: "black",
color: "white"
})
})
});
</script>
</head>
<body>
<div id = animTarget class = "elemClass">
Hello!
</div>
<button id = "button-1">Click Me</button>
</body>
</html>