How to apply an animation color effect on a div

I have this jQuery function :

$('.tracklistOff').find('.trackon').clone().insertAfter(($(param).parents('.trackon')));

I clone the div and I add it. The CSS class of trackon is :

.trackon{width:710px; height:26px; color:#CCCCCC; font-weight:bold; float:left;}

I'd like, when I add it, to put a red background color of trackon, and shade it to black; a sort of fadeIn(), without starting from hide (but from red) and finish to the trackon background (in my context, should be white)开发者_开发百科. How can I do it without any plugins?

You can do it with this: http://plugins.jquery.com/project/color

It's a plugin, yes, I know. But it's the only way I know how to do it short of rewriting the plugin yourself.

There is an animate-colors plugin for jquery that allows color animation using the normal animation methods. That should do it for you.

jQuery UI extends jQuery's animate method to allow you to modulate colors. Here's a link: http://jqueryui.com/demos/animate/