jQuery animate css borderColor 不起作用

Question

我有一个谷歌地图，当按下标记时，会打开一个信息框，并且对象列表上的一个 div 会得到 .style.borderColor="#FFF";

在该信息框的鼠标悬停上，我希望它返回到border-color:#000;

这适用于 javascript/jQuery

document.getElementById("rank_" + data.id).style.borderColor="#000"; //works good
$("#rank_" + data.id).css({borderColor: '#000'}); // also works good

这不起作用

$("#rank_" + data.id).animate({ "border-color": "#000" }, 600);
//or
$("#rank_" + data.id).animate({ borderColor: "#000" }, 600);
//tried also this wich works but without animation
$("#rank_" + data.id).css({borderColor: '#000'}).animate({ borderColor: "#000" }, 900);

对我所缺少的有什么想法吗？
简化示例 here

Answer 1

jQuery不支持彩色动画，我推荐一个小插件，比如 http://www.bitstorm.org/jquery/color-animation/

编辑:正如 @Ghillied 所提到的，如果您可以确定大多数目标浏览器都支持它们，那么 CSS3 过渡可能是一个更好的解决方案! @Rikard 在他的回答中也有一个很好的例子。

否则，bitstorm 插件的文件大小确实非常小，并且始终是我对兼容性的偏好(因为我的客户郁闷地陷入浏览器石坑中)