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:

with one of the following combinations:


NameType
Example:
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>

NameType