Can't animate the border color with jQuery

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.

Answer 2

You should definitely use the Color plugin as others already pointed out.

However, as a side note, you can use instead an interesting technique that consists animating variables (in this case color variable) and then do your stuff in the step function.

This might be a bit overkill, but gives you lots of flexibility to do custom animations:

// animate color variable from 0x0 to 0xF
$({ color: 0 }).animate({ color: 15}, {
    duration: 800,
    step: function(now, fx) {
        var hexValue = Math.round(now).toString(16);
        $("#social").css({
            'border-top-color': '#' + hexValue + '00',
            'border-bottom-color': '#' + hexValue + hexValue + hexValue
        });
    }
});

jsfiddle demo

Here is another answer regarding this tecnhique.