From jQuery JavaScript Library
The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties:
- backgroundColor
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- color
- outlineColor
with one of the following combinations:
- hex (#FF0000)
- rgb (rgb(255,255,255))
- names ("black")
Example:| Name | Type |
|---|
A simple color animation.
$(".block").toggle(function() {
$(this).animate({ backgroundColor: "black" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(".block").toggle(function() {
$(this).animate({ backgroundColor: "black" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
});
});
</script>
<style>
.block {
color: white;
background-color: #68BFEF;
width: 150px;
height: 70px;
margin: 10px;
}
</style>
</head>
<body>
<div class="block"> Click me</div>
</body>
</html>
