试着使用它

-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;

如果有人发现了这个。你最好使用jQuery UI版本，因为它可以在所有浏览器上运行。颜色插件在Safari和Chrome浏览器中存在问题。只是有时候有用。

Bitstorm拥有我见过的最好的jquery彩色动画插件。这是对jquery颜色项目的改进。它还支持rgba。

http://www.bitstorm.org/jquery/color-animation/

为了达到理想的效果，我使用了CSS过渡和JQuery的组合;显然，不支持CSS过渡的浏览器不会动画，但它是一个轻量级的选项，适用于大多数浏览器，对我的要求是可接受的退化。

使用Jquery修改背景颜色:

   $('.mylinkholder a').hover(
        function () {
            $(this).css({ backgroundColor: '#f0f0f0' }); 
        },
        function () {
            $(this).css({ backgroundColor: '#fff' });
        }
    );

CSS使用过渡淡出背景颜色的变化

   .mylinkholder a
   {
   transition: background-color .5s ease-in-out;
   -moz-transition: background-color .5s ease-in-out;
   -webkit-transition: background-color .5s ease-in-out; 
  -o-transition: background-color .5s ease-in-out; 
   }

我也有同样的问题，并通过包含jQuery UI来修复它。以下是完整的脚本:

<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>


<script type="text/javascript">
$(document).ready(function() {
$('#menu ul li.item').hover(
    function() {
        $(this).stop().animate({backgroundColor:'#4E1402'}, 300);
        }, function () {
        $(this).stop().animate({backgroundColor:'#943D20'}, 100);
    });
});
</script>

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

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

参见示例

更多信息参考