jQuery dynamic tabs - animating borderTopColor breaks css

Question

I am using jQuery dynamic tabs. I have the following set up for hover and selected effects:

/* normal tab */
.ui-tabs .ui-tabs-nav li 
{ 
    border-top-style: solid;
    border-top-width: 3px;
    border-top-color: #fff;
}

/* hover tab */
.ui-tabs .ui-tabs-nav li:hover
{
    border-top-color: #f00;
}

/* selected tab */
.ui-tabs .ui-tabs-nav li.ui-tabs-selected
{
    border-top-color: #0f0;
}

This works fine so far.

I'm now trying to add an animation when a new tab is created:

function animateTab(elem) { // elem is the 'li' of the tab
    tab.stop(false, true);
    var color = tab.css('borderTopColor');
    tab.css('borderTopColor', '#00f');
    tab.animate({ borderTopColor: color }, 500);
}

This also works, in the fact that the animation does it's thing. But after this animation, the tab has lost it's hover and selected effects. The border doesn't change on either.

Any ideas?

Thanks