如果你想具体地动画元素的背景颜色，我相信你需要包括jQueryUI框架。然后您可以执行以下操作：

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

jQueryUI有一些内置的效果，可能对您也有用。
http://jqueryui.com/demos/effect/

这个精确的功能（3秒发光来突出显示一条消息）在jQueryUI中作为突出显示效果实现
https://api.jqueryui.com/highlight-effect/
颜色和持续时间可变

我知道问题是如何使用jQuery，但你可以用简单的CSS和一点jQuery实现同样的效果。..
例如，你有一个带有'box'类的div，添加以下CSS：

.box {
    background-color: black;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -ms-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}

然后使用AddClass函数添加另一个具有不同背景颜色的类，如'box highlighted'或类似的东西，使用以下CSS：

.box.highlighted {
    background-color: white;
}

下面是一个codepen：https://codepen.io/anon/pen/baaLYB

通常你可以使用.animate()方法来操作任意的CSS属性，但是对于背景颜色，你需要使用color plugin。一旦你包含了这个插件，你就可以像其他人指出的那样使用$('div').animate({backgroundColor: '#f00'})来改变颜色。
正如其他人所写的，其中一些也可以使用jQueryUI库来完成。

仅使用jQuery（无UI库/插件）。即使是jQuery也很容易被淘汰

//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

演示：http://jsfiddle.net/5NB3s/2/

• SetTimeout将亮度从50%增加到100%，基本上使背景变为白色（您可以根据颜色选择任何值）。
• SetTimeout被 Package 在一个匿名函数中，以便它在循环（reason）中正常工作。

根据浏览器的支持，你可以使用css动画。浏览器支持IE10及以上的CSS动画。这是很好的，所以你不必添加jquery UI依赖，如果它只是一个小的复活节彩蛋。如果它是你的网站不可或缺的一部分（也就是IE9及以下版本所需的），请使用jquery UI解决方案。

.your-animation {
    background-color: #fff !important;
    -webkit-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
//You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera.
@-webkit-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-moz-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-moz-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-ms-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-ms-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-o-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-o-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}

接下来创建一个jQuery click事件，将your-animation类添加到您希望动画的元素中，触发背景从一种颜色渐变到另一种颜色：

$(".some-button").click(function(e){
    $(".place-to-add-class").addClass("your-animation");
});

我写了一个超级简单的jQuery插件来完成类似的事情。我想要的东西真的很轻的重量（它的732字节缩小），所以包括一个大插件或用户界面是不可能的我。它的边缘仍然有点粗糙，所以欢迎反馈。
你可以在这里检查插件：https://gist.github.com/4569265。
使用该插件，通过更改背景颜色创建高亮效果，然后添加setTimeout以启动插件以淡入到原始背景颜色，这将是一件简单的事情。

使用简单的javascript在2种颜色之间进行淡入淡出：

function Blend(a, b, alpha) {
  var aa = [
        parseInt('0x' + a.substring(1, 3)), 
        parseInt('0x' + a.substring(3, 5)), 
        parseInt('0x' + a.substring(5, 7))
    ];

  var bb = [
        parseInt('0x' + b.substring(1, 3)), 
        parseInt('0x' + b.substring(3, 5)), 
        parseInt('0x' + b.substring(5, 7))
    ];

  r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16);
  g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16);
  b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16);

  return '#'
        + r.substring(r.length - 2)
        + g.substring(g.length - 2)
        + b.substring(b.length - 2);
}

function fadeText(cl1, cl2, elm){
  var t = [];
  var steps = 100;
  var delay = 3000;

  for (var i = 0; i < steps; i++) {
    (function(j) {
         t[j] = setTimeout(function() {
          var a  = j/steps;
          var color = Blend(cl1,cl2,a);
          elm.style.color = color;
         }, j*delay/steps);
    })(i);
  }

  return t;
}

var cl1 = "#ffffff";
var cl2 = "#c00000";
var elm = document.getElementById("note");
T  = fadeText(cl1,cl2,elm);

来源：http://www.pagecolumn.com/javascript/fade_text.htm

javascript fade to白色without jQuery or other library：

<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
    var obj=document.getElementById("x");
    var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,""));
    if(unBlue>245) unBlue=255;
    if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")";
    else clearInterval(gEvent)
}
</script>

在印刷中，黄色是负蓝色，所以从第三个rgb元素（蓝色）开始，小于255开始，黄色高亮。然后，设置var unBlue值时的10+使蓝色减号递增，直到达到255。