无法使用jQuery为边框颜色设置动画

Question

我有这张桌子:

<table id="social" border="5">
    <tr>
        <td>
            <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyannbane.blogspot.com%2F&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=177127339057410" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
        </td>

        <td>
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://yannbane.blogspot.com/" data-via="Yannbane">Tweet</a>
        </td>

        <td>
            <g:plusone></g:plusone>
        </td>
    </tr>
</table>

我想用jquery为它的边界设置动画,如下所示:

$("#social").animate({"borderTopColor": "#f00", "borderBottomColor": "#fff"}, 800);

但是,它不起作用!什么都没发生,即使没有显示错误......

我也试过这个:

$("#social").animate({"border-top-tolor": "#f00", "border-bottom-color": "#fff"}, 800);

但结果相同......你是怎么做到的？

Answer 1

来自jQuery的animate参考(我的重点)

除非如下所述,否则应将所有动画属性设置为单个数值.大多数非数字属性无法使用基本jQuery功能进行动画处理(例如,宽度,高度或左边可以设置动画,但背景颜色不能, 除非使用jQuery.Color()插件).除非另有说明,否则属性值被视为多个像素.可以在适用的情况下指定单位em和%.

简而言之,看起来你需要使用Color()插件,或者你需要自己动手.

安德鲁对这个问题的回答似乎可以做你需要的很少的工作.