我喜欢使用delay()来完成这个任务，这里有一个例子:

jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);

这可以由函数调用，“element”是元素类/名称/等。元素将立即以#FCFCD8背景出现，稍等片刻，然后淡出为#EFEAEA。

简单地添加以下片段下面的jquery脚本和享受:

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

参见示例

更多信息参考

试试这个:

jQuery(".usercontent").hover(function() {
    jQuery(this).animate({backgroundColor:"pink"}, "slow");
},function(){
    jQuery(this).animate({backgroundColor:"white"}, "slow");
});

修订后的效果:

jQuery(".usercontent").hover(function() {

    jQuery(this).fadeout("slow",function(){
        jQuery(this).animate({"color","yellow"}, "slow");
    });
});

试试这个:

(function($) {  

            var i = 0;  

            var someBackground = $(".someBackground");  
            var someColors = [ "yellow", "red", "blue", "pink" ];  


            someBackground.css('backgroundColor', someColors[0]);  

            window.setInterval(function() {  
                i = i == someColors.length ? 0 : i;  
                someBackground.animate({backgroundColor: someColors[i]}, 3000);  
                i++;  
            }, 30);  

})(jQuery);  

你可以在这里预览示例:http://jquerydemo.com/demo/jquery-animate-background-color.aspx

这些天jQuery颜色插件支持以下命名颜色:

aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
black:[0,0,0],
blue:[0,0,255],
brown:[165,42,42],
cyan:[0,255,255],
darkblue:[0,0,139],
darkcyan:[0,139,139],
darkgrey:[169,169,169],
darkgreen:[0,100,0],
darkkhaki:[189,183,107],
darkmagenta:[139,0,139],
darkolivegreen:[85,107,47],
darkorange:[255,140,0],
darkorchid:[153,50,204],
darkred:[139,0,0],
darksalmon:[233,150,122],
darkviolet:[148,0,211],
fuchsia:[255,0,255],
gold:[255,215,0],
green:[0,128,0],
indigo:[75,0,130],
khaki:[240,230,140],
lightblue:[173,216,230],
lightcyan:[224,255,255],
lightgreen:[144,238,144],
lightgrey:[211,211,211],
lightpink:[255,182,193],
lightyellow:[255,255,224],
lime:[0,255,0],
magenta:[255,0,255],
maroon:[128,0,0],
navy:[0,0,128],
olive:[128,128,0],
orange:[255,165,0],
pink:[255,192,203],
purple:[128,0,128],
violet:[128,0,128],
red:[255,0,0],
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0]

我偶然发现这一页有同样的问题，但有以下问题:

我不能包括一个额外的jQuery插件文件与我目前的设置。 我不喜欢粘贴我没有时间阅读和验证的大块代码。 我没有css的权限。 我几乎没有时间去执行(它只是一个管理页面的视觉改进)

根据上述情况，几乎排除了所有答案。考虑到我的颜色退色非常简单，我使用了下面的快速技巧:

element
  .css('color','#FF0000')
;
$('<div />')
  .css('width',0)
  .animate(
    {'width':100},
    {
      duration: 3000,
      step:function(now){
        var v = (255 - 255/100 * now).toString(16);
        v = (v.length < 2 ? '0' : '') + v.substr(0,2);
        element.css('color','#'+v+'0000');
      }
    }
  )
;

上面的代码创建了一个临时div，它永远不会放在文档流中。然后，我使用jQuery的内置动画来动画该元素的数值属性(在本例中为width)，它可以表示百分比(0到100)。然后，使用阶跃函数，我用简单的十六进制计算将这个数字动画转换为文本颜色。

使用setInterval也可以实现同样的效果，但是通过使用这个方法，您可以从jQuery的动画方法(如.stop())中受益，并且您可以使用easing和duration。

显然，它只适用于简单的颜色褪色，对于更复杂的颜色转换，你需要使用上面的答案之一-或编码你自己的颜色褪色数学:)