1

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

在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);

关于我所缺少的任何想法？这里的
简化示例

4

3 回答 3

5

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

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

否则，bitstorm 插件的文件大小确实非常小，并且始终是我对兼容性的偏爱（因为我的客户令人沮丧地陷入浏览器停滞不前）

于 2013-07-03T12:47:26.267 回答
4

一种替代方法是仅使用 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

于 2013-07-03T12:55:24.770 回答
-1

使用 jQuery 用户界面：

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

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

于 2013-07-03T13:12:16.803 回答