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:

PLAIN TEXT
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:

PLAIN TEXT
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:

PLAIN TEXT
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:

PLAIN TEXT
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">
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>ejemplo color</title>
  6.     <style type="text/css">
  7.         #caja_ejemplo{
  8.             background: white;
  9.             color:black;
  10.         }
  11.     </style>
  12.     <script src="http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script>
  13.     <script src="http://dev.jquery.com/~john/ticket/fx-rewrite2/color.js"></script>
  14.    
  15.     <script type="text/javascript">
  16.         function color(objeto){
  17.         $(objeto)
  18.             .animate({ color: "white" }, 1000)        //cambia el color de la letra a blanco
  19.             .animate({ backgroundColor: "orange" }, 1000);  //cambia el color del fondo a naranja
  20.         }
  21.     </script>
  22.  
  23. </head>
  25.     <a href="#" onClick="javascript:color('#caja_ejemplo');">Cambiar color</a>
  26.     <div id="caja_ejemplo" style=""> Texto de ejemplo para ver el efecto </div>
  27. </body>
  28. </html>