jQuery logoOtro efecto tanto o mas interesante con el que he estado experimentando un poquiyo es el del cambio de color. A partir del plugin Color (se rompieron la cabeza con el nombre) se puede cambiar de forma gradual el color de un fondo, borde o texto. Como todas las funciones de jQuery las funciones son encadenables, así­ que os dejo un ejemplo de como se cambia un texto a blanco y un fondo a naranja.
El truco de utilizar este plungin de jQuery es declarar el color de inicio del que tiene que partir cada elemento. ya sea background:COLOR; o color:COLOR; desde el CSS.
Declaramos los valores de CSS de nuestro div de ejemplo:

CSS:
  1. #caja_ejemplo{
  2.     background: white;
  3.     color:black;
  4. }

Cargamos la linbreria de jQuery y el plugin de color, y establecemos una funcion que en este caso se va a llamar color() dentro del header:

HTML:
  1. <script src="http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script>
  2. <script src="http://dev.jquery.com/~john/ticket/fx-rewrite2/color.js"></script>
  3.  
  4. <script type="text/javascript">
  5.     function color(objeto){
  6.     $(objeto)
  7.         .animate({ color: "white" }, 1000)        //cambia el color de la letra a blanco
  8.         .animate({ backgroundColor: "orange" }, 1000);  //cambia el color del fondo a naranja
  9.     }
  10. </script>

Por ultimo insertamos el código de ejemplo de la pagina:

HTML:
  1. <a href="#" onClick="javascript:color('#caja_ejemplo');">Cambiar color</a>
  2. <div id="caja_ejemplo" style=""> Texto de ejemplo para ver el efecto </div>

Os dejo el ejemplo completo:

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>ejemplo color</title>
  5.     <style type="text/css">
  6.         #caja_ejemplo{
  7.             background: white;
  8.             color:black;
  9.         }
  10.     </style>
  11.     <script src="http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script>
  12.     <script src="http://dev.jquery.com/~john/ticket/fx-rewrite2/color.js"></script>
  13.    
  14.     <script type="text/javascript">
  15.         function color(objeto){
  16.         $(objeto)
  17.             .animate({ color: "white" }, 1000)        //cambia el color de la letra a blanco
  18.             .animate({ backgroundColor: "orange" }, 1000);  //cambia el color del fondo a naranja
  19.         }
  20.     </script>
  21.  
  22. </head>
  23.     <a href="#" onClick="javascript:color('#caja_ejemplo');">Cambiar color</a>
  24.     <div id="caja_ejemplo" style=""> Texto de ejemplo para ver el efecto </div>
  25. </body>
  26. </html>