Question

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

在该infoBox的mouseout上，我希望它返回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插件在文件大小方面确实非常小，并且总是我对兼容性的偏好（因为我的客户陷入了浏览器的困境）

Answer 2

另一种方法是只使用CSS：我在你的codepen示例中使用#one，但这应该适用于你拥有的div的类。

#one {
    border:3px #0F0 solid;
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

http://codepen.io/anon/pen/xGIhu

Answer 3

使用jQuery UI：

$("#rank_" + data.id).animate({ borderColor: "#000" }, 600);

http://jqueryui.com/animate/#default 跨浏览器rlz！

jQuery动画css borderColor无法正常工作

3 个答案: