More color animations at the same time on the same element

More color animations at the same time on the same element

I've downloaded the folowing plugin:
http://plugins.jquery.com/project/color

And it worked ! But now I want to now if I cand do more color animations on one element.

I have an example, when an <li> is hovered, it chages its background color, and at the same time, I want it to change the color (text color):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  4. <head>
  5.    
  6.     <title>jQuery testing</title>
  7.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  8.     <script type="text/javascript" src="http://netcustoms.webs.com/colors_jquery.js"></script>
  9.     <script type="text/javascript">
  10.         $(document).ready(function() {
  11.             $('ul.menu li').animate({backgroundColor : 'black'});
  12.             $('ul.menu li').hover(function() {
  13.                 $(this).stop().animate({backgroundColor : 'red'}, 400);
  14.             }, function() {
  15.                 $(this).stop().animate({backgroundColor : 'black'}, 400);
  16.             });
  17.         });
  18.     </script>
  19.     <style type="text/css">
  20.         body {
  21.             color: #666666;
  22.             font-family: Verdana;
  23.             font-size: 11px;
  24.             background: #EAEAEA;
  25.         }
  26.         a {
  27.         text-decoration: none;
  28.         }
  29.         ul.menu {
  30.             list-style: none outside none;
  31.             padding: 0px;
  32.             margin: 0px;
  33.         }
  34.         ul.menu a {
  35.             color: white;
  36.             padding: 10px 16px;
  37.             display: block;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <ul class="menu">
  43.         <li><a href="#">Link</a></li>
  44.         <li><a href="#">Link 2</a></li>
  45.         <li><a href="#">Link 3</a></li>
  46.     </ul>
  47. </body>
  48. </html>