Question

I have this table:

<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>

And I’d like to animate its borders with jquery, like this:

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

But, it doesn’t work! Nothing happens at all, even no errors are shown…

I’ve also tried this:

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

But with same results… How do you do this?

Answer 1

From the jQuery animate reference (my emphasis)

All animated properties should be animated to a single numeric value,
except as noted below; most properties that are non-numeric cannot
be animated using basic jQuery functionality (For example, width,
height, or left can be animated but background-color cannot be,
unless the jQuery.Color() plugin is used). Property values are treated
as a number of pixels unless otherwise specified. The units em and %
can be specified where applicable.

In short, it looks like you either need the Color() plugin or you need to roll your own.

Andrew’s answer on this question seems to do what you need for very little work.